Red de conocimiento informático - Material del sitio web - Cómo adaptar una página de PC a la pantalla del móvil

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!