¿Cómo diseñar un diseño web responsive o html5?
Los dispositivos móviles están sustituyendo a los dispositivos de escritorio y convirtiéndose en el terminal más habitual para acceder a Internet. Por lo tanto, los diseñadores web tienen que enfrentarse a un problema difícil: ¿cómo representar la misma página web en dispositivos de diferentes tamaños?
Las pantallas de los teléfonos móviles son relativamente pequeñas y el ancho generalmente es inferior a 600 píxeles; el ancho de la pantalla de una PC generalmente es superior a 1000 píxeles (el ancho principal actual es 1366 × 768), y algunos tienen Alcanzó los 2000 píxeles. No es fácil presentar el mismo contenido con resultados satisfactorios en diferentes tamaños de pantalla.
La solución para muchos sitios web es proporcionar diferentes páginas para diferentes dispositivos, como versiones móviles o versiones de iPhone/iPad. Esto definitivamente puede garantizar el efecto, pero es más problemático y requiere mantener varias versiones al mismo tiempo. Además, si un sitio web tiene varios portales, esto aumentará considerablemente la complejidad del diseño arquitectónico.
Por lo tanto, algunas personas han imaginado durante mucho tiempo que se puede "diseñar una vez, universal", permitiendo que la misma página web se adapte automáticamente a pantallas de diferentes tamaños y ajuste automáticamente el diseño según el ancho de la pantalla.
Primero, comprenda qué es el "diseño web adaptativo".
A partir de 2010, Ethan Marcotte propuso el término "diseño web adaptable", que se refiere a la capacidad de reconocer automáticamente el ancho de la pantalla. realizar los ajustes correspondientes al diseño web.
Puso un ejemplo, que son las cabezas de los seis protagonistas de "El Sherlock Holmes". Si el ancho de la pantalla es superior a 1300 píxeles, se organizarán 6 imágenes una al lado de la otra en una fila.
Si el ancho de la pantalla está entre 600 y 1300 píxeles, las seis imágenes se dividen en dos líneas.
Si el ancho de la pantalla está entre 400 y 600 píxeles, la barra de navegación se moverá a la parte superior de la página.
Si el ancho de la pantalla es inferior a 400 píxeles, las seis imágenes se dividen en tres líneas.
Hay muchos más ejemplos como este en Media Query
También hay un widget de prueba que puede mostrar los resultados de las pruebas de pantallas de diferentes resoluciones en una página web al mismo tiempo. Recomiendo instalar.
En segundo lugar, se debe permitir el ajuste automático del ancho de la página web.
¿Cómo funciona el "diseño web adaptativo"? No es tan difícil.
Primero, agregue una línea de metaetiquetas de ventana gráfica al principio del código de la página web.
La ventana gráfica tiene el ancho y alto predeterminados de la página web. La línea de código anterior significa que 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 el 100% del área de la pantalla.
Todos los principales navegadores admiten esta configuración, incluido IE9. Para esos navegadores antiguos (principalmente IE6, IE7, IE8), debe usar css3-mediaqueries.js
En tercer lugar, el ancho absoluto no se puede usar en el diseño.
Debido a que la página web ajustará su diseño de acuerdo con el ancho de la pantalla, no es posible utilizar un diseño de ancho absoluto o elementos con ancho absoluto. Esto es muy importante.
Específicamente, el código CSS no puede especificar el ancho de píxel:
Ancho: xxx px
Solo se puede especificar el ancho porcentual:
Ancho: xx %;
o
Ancho: automático;
Cuarto, tamaño relativo de la fuente
No se puede utilizar el tamaño absoluto para las fuentes ( px), sólo se pueden utilizar tamaños relativos (em).
Texto {
Fuente: normal 100% Helvética, Arial, sans serif
}
El código anterior especifica el tamaño de fuente; Es el 100% del tamaño de página predeterminado, que es de 16 píxeles.
h1 {
Tamaño de fuente: 1,5 em;
}
Entonces, el tamaño de h1 es 1,5 veces el tamaño predeterminado, es decir, 24 píxeles (24/16 = 1,5).
Pequeño{
Tamaño de fuente: 0,875em
}
El tamaño de los elementos pequeños es 0,875 veces el tamaño predeterminado, que es 14 píxeles (14/16=0,875).
Verbo (abreviatura de verbo) rejilla fluida o flujo en cascada
"Diseño fluido" significa que la posición de cada bloque es flotante en lugar de fija.
. Principal {
float:right;
width:70%;
}
. Columna izquierda {
Flotante: izquierda;
Ancho: 25%;
}
La ventaja de flotar es que si el ancho es demasiado pequeño, no puede contener dos elementos, el último elemento se desplazará automáticamente hasta la parte inferior del elemento anterior y no se desbordará en la dirección horizontal, evitando la aparición de barras de desplazamiento horizontales.
Además, el posicionamiento absoluto (posición: absoluta) debe utilizarse con mucho cuidado.
Sexto, carga selectiva de CSS
El núcleo del "diseño web adaptativo" es el módulo de consulta de medios introducido por CSS3.
Lo que significa es detectar automáticamente el ancho de la pantalla y luego cargar el archivo CSS correspondiente.
El código anterior significa que si el ancho de la pantalla es inferior a 400 píxeles (ancho máximo del dispositivo: 400 px), se cargará el archivo tinyScreen.css.
Si el ancho de la pantalla está entre 400 y 600 píxeles, se carga el archivo smallScreen.css.
Además de cargar archivos CSS con etiquetas html, también puedes cargarlos en archivos CSS existentes.
@import url("tinyScreen.css ") suma de pantalla (ancho máximo del dispositivo: 400 px);
7. En el mismo archivo CSS, también puedes optar por aplicar diferentes reglas CSS según las diferentes resoluciones de pantalla.
@PANTALLA MEDIA Y (ANCHO MÁXIMO DEL DISPOSITIVO: 400 píxeles){
. Columna {
Flotante: Ninguna
Ancho: Automático
}
#Sidebar{
visualización :none;
}
}
El código anterior significa que si el ancho de la pantalla es inferior a 400 píxeles, el bloque de columnas flota (float:none ), el ancho se ajusta automáticamente (ancho:auto) y el bloque de la barra lateral no se muestra (display:none).
8. Pantalla adaptativa (imagen fluida)
Además del diseño y el texto, el "diseño web adaptativo" también debe lograr el escalado automático de las imágenes.
Solo requiere una línea de código CSS:
img { max-width:100%;}
Esta línea de código también funciona para la mayoría de los vídeos incrustados. en páginas web Efectivo, por lo que se puede escribir como:
img, object { max-width:100%;}
Las versiones antiguas de IE no admiten el ancho máximo, por lo que debe escribirse como:
img { width:100%;}
Además, puede producirse distorsión de la imagen al escalar imágenes en plataformas Windows. En este punto, puede intentar utilizar el comando propietario de IE:
img {-ms-interpolation-mode:bicubic;}
O imgSizer .js de Ethan Marcotte.
addLoadEvent(function() {
var imgs = document . getelementbyidx _ x(" content "). getElementsByTagName _ r(" img ");
img sizer . collate(imgs);
});
Sin embargo, si es posible, es mejor cargar imágenes con diferentes resoluciones según los diferentes tamaños de pantalla.
Hay muchas formas de hacer esto, tanto en el lado del servidor como en el del cliente.
Siempre que sigas estas ocho pautas de diseño, creo que podrás diseñar rápidamente una página web adaptable.