Cómo adaptar una página de PC 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; meta name="viewport" content="width=device-width, initial-scale =1.0, escala máxima=1.0, escala mínima=1.0, escalable de usuario=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 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 usar porcentaje de ancho: xx; no puede usar 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 adaptabilidad
.abc{ height : 300px; borde: 1px sólido #000; margen: 0 automático}?
@media pantalla y (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*/?
@media screen y ( ancho máximo: 1200px) {?
.abc {ancho: 900px} ?
}?
/* Cuando el ancho del navegador está configurado para no exceder 1200px, abc muestra un ancho de 900px */?
@media pantalla y (ancho máximo: 901px) {?
.abc {ancho: 200px;} ?
}?
/* Cuando el ancho del navegador está configurado para que no exceda los 901 px, abc muestra un ancho de 200 px*/?
@media screen y (max-width: 500 px ) {?
.abc {width: 100px;} ?
}?
/* Cuando el ancho del navegador está configurado para que no exceda los 500 px, se muestra abc 100px de ancho*/?
Cabe señalar que el código CSS está en orden y el CSS se escribe de grande a pequeño (cuanto mayor es el ancho del navegador, mayor es). Debido a la relación lógica, el juicio de @media sobre la depuración de CSS hará que el juicio no sea válido.
Cuarto, adaptación de la imagen
img { max-width: 100;}
Las versiones antiguas de IE no admiten el ancho máximo, por lo que tenemos 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!