Este artículo presenta la implementación del diseño web responsivo (adaptativo) HTML5 y lo comparte con todos, de la siguiente manera:
Paso 1: agregue una línea de metaetiquetas de ventana gráfica al encabezado del código de la página web
<meta nombre=contenido de la ventana gráfica=ancho=ancho del dispositivo, escala-inicial=1 />
la ventana gráfica es el ancho y alto predeterminados de la página web. La línea de código anterior significa: el ancho de la página web es igual al ancho de la pantalla de forma predeterminada (ancho = ancho del dispositivo) y la relación de escala original (escala inicial). =1) es 1.0, es decir, el tamaño inicial de la página web ocupa la pantalla el 100% del área.
Todos los principales navegadores admiten esta configuración, incluido IE9. Para los navegadores más antiguos (principalmente IE6, 7, 8), debe usar css3-mediaqueries.js
<!--[if lt IE 9]> <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]-- >
Paso 2: (Nota) No utilice ancho ni tamaño de fuente absolutos
ancho:automático; ancho:XX%;
Paso tres: (Nota) Tamaño de fuente
El tamaño de fuente es el 100% del tamaño predeterminado de la página, que es de 16 píxeles.
No utilice el tamaño absoluto PX para las fuentes, utilice el tamaño relativo REM
html{tamaño de fuente:62,5%;} cuerpo {fuente:normal 100% Arial,sans-serif;tamaño de fuente:14px;tamaño de fuente:1.4rem;Paso 4: Diseño de flujo
El significado de diseño fluido es que la posición de cada bloque es flotante y no fija.
.izquierda{ ancho:30%; flotador:izquierda} .derecho{ ancho:70%; flotador:derecha;}La ventaja es que si el ancho es demasiado pequeño para acomodar dos elementos, el siguiente elemento se desplazará automáticamente hasta la parte inferior del elemento anterior sin desbordarse en la dirección horizontal, evitando así la aparición de barras de desplazamiento horizontales.
Paso 5: elige cargar CSS
El núcleo del diseño web adaptativo es el módulo Media Query introducido por CSS3. Detecta automáticamente el ancho de la pantalla y luego carga el archivo CSS correspondiente
<link rel=tipo de hoja de estilo=text/css media=pantalla y (ancho máximo del dispositivo: 600px) href=style/css/css600.css />
El código anterior significa que si el ancho de la pantalla es inferior a 600 píxeles (ancho máximo del dispositivo: 600 px), cargue el archivo css600.css.
Si el ancho de la pantalla está entre 600 y 980 píxeles, cargue el archivo css600-980.css
<link rel=tipo de hoja de estilo=text/css media=pantalla y (ancho mínimo: 600 px) y (ancho máximo del dispositivo: 980 px) href=css600-980.css />
Además (no recomendado): además de cargar archivos CSS con etiquetas html, también puede cargarlos en archivos CSS existentes
@import url(css600.css) pantalla y (ancho máximo del dispositivo: 600px);
Paso 6: reglas CSS @media
@media screen y (max-device-width: 400px) { .left{ float:none;} }Cuando la pantalla es menor que 400, izquierda cancela la flotante
Paso 7: Adaptación de imágenes
El diseño web responsivo también debe implementar el escalado automático de imágenes.
img, objeto {ancho máximo: 100%;}Las versiones anteriores de IE no admiten ancho máximo, así que tengo que escribir:
imagen {ancho: 100%;}Al escalar imágenes en la plataforma Windows, es posible que se produzca distorsión de la imagen. En este momento, puede intentar utilizar el comando propietario de IE.
img { ancho: 100%; -ms-modo-interpolación: bicúbico;}O utilice js--imgSizer.js
addLoadEvent(function() { var imgs = document.getElementById(content).getElementsByTagName(img); imgSizer.collate(imgs); });Nota: Si es posible, es mejor cargar imágenes de diferentes resoluciones según los diferentes tamaños de pantalla.
Operación sencilla:
<tipo de estilo=text/css> img{ ancho máximo:100%;} video{ ancho máximo:100%; altura:auto;} encabezado ul li{ float:left-style:none; tipo: ninguno; margen derecho: 10px;} encabezado seleccionar{display:none;} @media (ancho máximo: 960px){ encabezado ul{ display:none;} encabezado select{ display:inline-block;} } </style> <body> <header> <ul> <li><a href=# class=active>Inicio</a></li> <li><a href =#>AAA</a></li> <li><a href=#>BBB</a></li> <li><a href=#>CCC</a></li> <li ><a href=#>DDD</a></li> </ul> <select> <option class=seleccionado><a href=#>Inicio</a></option> <option value=/AAA>AAA</option> <option value=/BBB>BBB</ opción> <opción valor=/CCC>CCC</opción> <opción valor=/DDD>DDD</option> </select> </header> </body>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.