¿Cómo adaptar una página de PC a la pantalla del móvil? ¿Cómo hacer un sitio web que se adapte a la pantalla del móvil?
Ya sea un ordenador o un teléfono móvil, el proceso de adaptación a la pantalla es en realidad el mismo.
Primero, agregue una línea de etiquetas de ventana gráfica al principio del código de la página web
lt; metaname="viewport" content="width=device-width, initial-scale= 1.0, máximo -scale=1.0, mínimo-escala=1.0, user-scalable=no"/gt;
la ventana gráfica es el ancho y alto predeterminados de la página web. La línea de código anterior significa que el El ancho de la página web es igual al ancho de la pantalla de forma predeterminada (ancho = ancho del dispositivo), la relación de escala original (escala inicial = 1) es 1.0, es decir, el tamaño inicial de la página web ocupa 100 del área de la pantalla. Es decir, dejar que el ancho de la ventana gráfica sea igual a la resolución real en el dispositivo físico y no permitir que el usuario haga zoom.
En segundo lugar: el ancho de la página web css debe utilizar ancho porcentual: xx;, no píxeles absolutos. Por supuesto que puedes usar width: auto;
Tercero, diseño de flujo
.left{
float: left;
width: * **;
}
Cuarto, elija cargar css
Esta es la parte clave de la autoadaptación
.abc {alto: 300px; borde: 1pxsolid000; margen: 0auto}
@mediascreenand(ancho mínimo: 1201px){
.abc{ancho: 1200px}
}
/*Cuando el ancho del navegador se establece en no menos de 1201 px, abc muestra un ancho de 1200 px*/
@mediascreenand(max-width: 1200 px){
.abc{ ancho: 900px}
}
/*Cuando el ancho del navegador está configurado para que no exceda los 1200 px, abc muestra un ancho de 900 px*/
@mediascreenand(max-width: 901px){
.abc{width: 200px;}
}
/*Cuando el ancho del navegador está configurado en no debe ser mayor que 901 px, abc muestra un ancho de 200 px*/
@mediascreenand(max-width: 500px){
.abc{width: 100px;}
}
/*Configuración Cuando el ancho del navegador no es superior a 500 px, abc muestra un ancho de 100 px*/
Debe prestar atención al orden de los códigos CSS , Componer CSS de grande a pequeño (se considera que cuanto mayor es el ancho del navegador, mayor es Esto se debe a la relación lógica, el juicio de @media de que la depuración de CSS dará como resultado un juicio no válido).
Cuarto, adaptación de imagen
img{max-width: 100;}
Las versiones antiguas de IE no admiten el ancho máximo, así que tengo que escribir : img{width: 100;}
5. Usar tamaño de fuente relativo
La fuente no puede usar tamaño absoluto (px), sino solo tamaño relativo (em).
Lo más importante aquí son los elementos tercero y cuarto, que son el uso de diseño fluido y carga selectiva de CSS. ¡Buena suerte!