¿Cómo utilizar el código CSS para que la imagen se adapte al ancho de visualización?
Métodos para código de ancho de visualización adaptable:
1. Primero, agregue una línea de metaetiquetas de ventana gráfica al principio del código de la página web.
Viewport es el ancho y alto predeterminados de la página web. la línea anterior El código indica que el ancho de la página web es igual al ancho de la pantalla de forma predeterminada (ancho = ancho del dispositivo), y la 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 navegadores más antiguos (principalmente IE6, 7 y 8), necesita usar css3-mediaqueries.js.
2. No use ancho absoluto
Porque la página web se ajustará según al ancho de la pantalla ajusta el diseño, por lo que no puede usar un diseño de ancho absoluto y no puede usar un elemento de ancho absoluto. Éste es muy importante.
Específicamente, el código CSS no puede especificar el ancho de píxeles:
ancho:xxx px;
Solo se puede especificar el ancho porcentual:
ancho : xx%;
o
width:auto;
3. Fuentes de tamaño relativo
Tampoco se pueden utilizar tamaños de fuente absolutos ( px), sólo se pueden utilizar tamaños relativos (em).
cuerpo {
fuente: normal 100% Helvetica, Arial, sans-serif;
}
El código anterior especifica la fuente tamaño como 100% del tamaño predeterminado de la página, que es 16 píxeles.
h1 {
font-size: 1.5em;
}
Entonces, el tamaño de h1 es 1,5 veces el tamaño predeterminado , Es decir, 24 píxeles (24/16 = 1,5).
small {
font-size: 0.875em;
}
El tamaño de los elementos pequeños es 0,875 veces el tamaño predeterminado, es decir, 14 píxeles (14/16=0,875).
Fluid Grid
"Fluid Grid" significa que la posición de cada bloque es flotante en lugar de fija.
.main {
flotador: derecha;
ancho: 70%;
}
.leftBar {
float: left;
width: 25%;
}
La ventaja de float es que si el ancho es demasiado pequeño, no puede Para acomodar dos elementos, el último elemento se desplazará automáticamente debajo del elemento anterior sin desbordamiento horizontal, evitando así las barras de desplazamiento horizontales.
Además, el posicionamiento absoluto (posición: absoluta) también debe utilizarse con mucha precaución.
Quinto, elija cargar CSS
El "diseño web adaptable" es el núcleo del módulo de consulta de medios introducido por CSS3.
Lo que significa es que detecta automáticamente el ancho de la pantalla y luego carga el archivo CSS correspondiente.
El código anterior indica , Si el ancho de la pantalla es inferior a 400 píxeles (ancho máximo del dispositivo: 400 px), se carga el archivo pequeño.css.
Si el ancho de la pantalla está entre 400 y 600 píxeles, se carga el archivo smallScreen.css.
Además de cargar un archivo CSS usando etiquetas html, también puedes cargarlo dentro de un archivo CSS existente.
Sexto, reglas CSS @media
En el mismo archivo CSS, también puedes optar por aplicar diferentes reglas CSS basadas en diferentes resoluciones de pantalla.
@media screen y (max-device-width: 400px) {
.column {
float: none;
width :auto;
}
#sidebar {
display:none;
}
}
El código anterior indica que si el ancho de la pantalla es inferior a 400 píxeles, el bloque de columnas no flotará (flotante: ninguno), el ancho se ajustará automáticamente (ancho: automático) y el bloque de la barra lateral no se mostrará (pantalla: ninguna).
7. Adaptación de imágenes (imágenes fluidas)
Además del diseño y el texto, el "diseño web adaptativo" también debe realizar el escalado automático de las imágenes.
Esto se logra con una sola línea de código CSS:
img { max-width: 100%;}
Esta línea de código funciona para la mayoría de los archivos integrados. videos también es válido, por lo que se puede escribir como:
img, object { max-width: 100%;}
Las versiones anteriores de IE no admiten el ancho máximo, por lo que debe escribirse como:
p>
img { width: 100% }
Además, puede producirse distorsión de la imagen al escalar imágenes en plataformas Windows. En este caso, intente utilizar el comando propietario de IE:
img { -ms-interpolation-mode: bicubic }
O utilice imgSizer.js de Ethan Marcotte
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate( imgs);
});
Sin embargo, cuando esté disponible, sería mejor cargar imágenes en diferentes resoluciones según el tamaño de la pantalla. Hay muchas formas de hacer esto, tanto del lado del servidor como del lado del cliente.