¿Qué es el diseño responsivo?
El diseño responsivo significa que la misma página tiene diferentes diseños en diferentes tamaños de pantalla. Hoy en día, cuando Internet móvil está altamente desarrollado, las páginas web que desarrollamos en navegadores de escritorio ya no pueden satisfacer las necesidades de visualización en dispositivos móviles. El método de desarrollo tradicional consiste en desarrollar un conjunto de páginas en el lado de la PC y otro conjunto de páginas en el lado móvil. Pero esto es muy problemático. Con cada vez más terminales diferentes, es necesario desarrollar varias versiones diferentes de la página. Para utilizar un diseño responsivo, solo necesita desarrollar un conjunto. EthanMarcotte propuso el concepto de diseño responsivo en mayo de 2010. En resumen, un sitio web puede ser compatible con múltiples terminales.
La diferencia entre el desarrollo responsivo y el desarrollo separado para dispositivos móviles y PC: el desarrollo responsivo solo escribe un conjunto de interfaces y muestra diferentes diseños y contenido al detectar la resolución de la ventana gráfica y procesar el código en el cliente para diferentes clientes. El terminal móvil y el terminal de PC se desarrollan por separado. Al detectar la resolución de la ventana gráfica, puede determinar si el dispositivo al que se accede actualmente es una PC, una tableta o un teléfono móvil, solicitando así al servidor y devolviendo páginas diferentes.
¿Cuál es el principio del desarrollo receptivo?
El principio del desarrollo responsivo es utilizar Media Query en CSS3 para establecer diferentes diseños y estilos para dispositivos de diferentes anchos para adaptarse a diferentes dispositivos.
Definición y uso de la consulta SS3 @media:
Con la consulta @media, puede definir diferentes estilos para diferentes tipos de medios. @media puede configurar diferentes estilos para diferentes tamaños de pantalla, especialmente si necesita configurar una página responsiva, @media es muy útil. Cuando restablece el tamaño del navegador, la página también se volverá a representar según el ancho y el alto del navegador.
Por ejemplo, si el ancho de la pantalla es inferior a 500 píxeles, cambie el color de fondo a rojo.
Para implementar un diseño responsivo, los métodos comúnmente utilizados incluyen los siguientes:
(1) Utilice consultas de medios en CSS (la más simple);
(2) Utilice JavaScript (el costo de uso es relativamente alto);
(3) Utilice marcos de código abierto de terceros (como bootstrap, que puede admitir varios navegadores).
Establecer metaetiqueta
Primero, debemos configurar la metaetiqueta para indicarle al navegador que haga que el ancho de la ventana gráfica (el área visible de la página web) sea igual al ancho del dispositivo y prohibir al usuario hacer zoom en la página, como se muestra a continuación:
<metaname=viewportcontent=ancho=ancho del dispositivo,escala-inicial=1,escala-máxima=1,escalable-usuario=no>
Al configurar la ventana gráfica, debe prestar atención. La ventana gráfica es el tamaño del área visible de la página web. Al configurar la ventana gráfica, no necesita preocuparse por la altura específica. La altura se expande automáticamente según el contenido de la página web. El significado del contenido de la metaetiqueta anterior es el siguiente:
● ventana gráfica: ventana gráfica, que representa el área visible de la página web;
●ancho: controla el tamaño de la ventana gráfica. Puede especificar un valor específico, como 600, o un valor especial compuesto por palabras clave. Por ejemplo, ancho del dispositivo representa el ancho del dispositivo.
●escala inicial: indica la relación de escala inicial, que es la relación de escala cuando la página se carga por primera vez;
●escala máxima: indica la relación máxima que el usuario puede ampliar, que va de 0 a 10,0;
●escala mínima: indica que los usuarios pueden hacer zoom a la escala mínima, que va de 0 a 10,0;
●escalable por el usuario: indica si el usuario puede hacer zoom manualmente, "sí" significa que se permite el escalado, "no" significa que el escalado está prohibido.
consultas de los medios
Las consultas de medios CSS pueden definir diferentes estilos CSS para diferentes tipos de medios (impresión de pantalla) según condiciones específicas, de modo que los usuarios que utilizan diferentes dispositivos puedan obtener la mejor experiencia.
Utilice HTML como ejemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>Tutorial introductorio de página adaptable: Albert Yang</title><linkrel =stylesheethref=style.css><enlacere l=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnNcrosso rigin=anonymous></head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>Página de inicio</a></li><li><ahref= #>Blog</a></li><li><ahref=#>Contáctame</a></li><li><ahref=#>Tablero de mensajes</a></li><li> <ahref=#>Acerca de mí</a> </li><li><ahref=#>Muro de fotos</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden=true></i </div></header><div><div><h2>Diseño responsivo</h2><p>Diseño responsivo significa que la misma página tiene diferentes diseños en diferentes tamaños de pantalla. El método de desarrollo tradicional es desarrollar un conjunto para la PC y otro conjunto para el teléfono móvil. Sin embargo, cuando se utiliza un diseño responsivo, solo es necesario desarrollar un conjunto. La diferencia entre diseño responsivo y diseño adaptativo: el diseño responsivo desarrolla un conjunto de interfaces y muestra diferentes diseños y contenidos al detectar la resolución de la ventana gráfica y realizar el procesamiento de código en el lado del cliente para diferentes clientes, el diseño adaptativo requiere el desarrollo de múltiples conjuntos de interfaces; , al detectar la resolución de la ventana gráfica, se determina si el dispositivo al que se accede actualmente es una PC, tableta o teléfono móvil, solicitando así la capa de servicio y devolviendo páginas diferentes. Las consultas de medios CSS3 nos permiten definir diferentes estilos para diferentes tipos de medios. Cuando se restablece el tamaño de la ventana del navegador, la página también se volverá a representar según el ancho y el alto del navegador. </p><ahref=#>Leer el texto completo</a></div><imgsrc=img.png></div></body></html>
Resultados de ejecución:
El siguiente es un ejemplo completo para demostrar la implementación del diseño responsivo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Diseño responsivo</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, usuario -scalable=no/><estilo>*{margin:0px;padding:0px;font-f amily:Microsoft Yahei;}#head,#foot,#main{height:100px;width:1200px;/*width:85%;*/background-color:goldenrod;text-align:center;font-size:48px ; altura de línea:100px;margin:0auto;}#headdiv{display:none;font-size:20px;h ocho:30px;ancho:100px;color de fondo:verde;float:right;line-height:30px;margin-top:35px;}#headul{ancho:80%;}#headulli{ancho:20%;float: izquierda;text-align:center;list-style:none;font-size:20px;}#main{él derecho:auto;margen:10pxauto;overflow:hidden;}.izquierda,.centro,.derecha{altura:600px;altura de línea:600px;float:izquierda;ancho:20%;color de fondo:rojo}.centro{ ancho:60%;borde-izquierdo:10pxsolid#FFF;borde-derecho:10pxso lid#FFF;box-sizing:border-box;}@mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}}@mediaonlyscreenand(max-width:980px){. derecha{display:none;}.left{width:30%;}.center{width:70%;border- derecha: oculta;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height:200px;line-height:200px;}.center{border: oculto;borde-superior:10pxsolid#FFFFFF;borde-inferior:10pxso lid#FFFFFF;height:600px;line-height:600px;}#headul{display:none;}#headdiv{display:block;}}</style></head><body><div><headerid=head ><ul><li>encabezado1</li><li>encabezado2</li><li>encabezado2</li><li>encabezado2</li>< li>encabezado2</li></ul><div>icono</div></header><sectionid=main><divclass=izquierda>izquierda</div><divclass=center>centro</div><divclass =derecha>derecha</div></section><footerid=foot>pie de página</footer></div></body></html>Resultados de ejecución:
