¿Cómo hacer que una página de PC se adapte automáticamente a la pantalla del móvil?
Cómo adaptar la página a la pantalla (las siguientes letras y signos de puntuación son códigos profesionales):
Ya sea un ordenador o un teléfono móvil, los pasos para adaptarse a la La pantalla es en realidad la misma.
Primero, agregue una línea de etiquetas de ventana gráfica al principio del código de la página web?lt; =1.0, escala mínima=1.0, escalable por el usuario=no" /gt;?viewport 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), 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 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 css de la página web debe usar porcentaje de ancho: xx;, no puede usar píxeles absolutos.
Por supuesto que puedes usar width: auto;?
En tercer lugar, ¿diseño de flujo?.left{float: left; width: ***;}?
Cuarto, ¿elegir cargar css? ¿Esta es la parte clave de la adaptabilidad?.abc{ height: 300px; border: 1px solid #000; margin: 0 auto}?@media screen and (min-width: 1201px) {?. abc {ancho: 1200px} ?}?/* Cuando el ancho del navegador se establece en no menos de 1201px, abc muestra un ancho de 1200px*/@pantalla multimedia y (ancho máximo: 1200px) {?.abc {ancho: 900px} ? }?/* Cuando el ancho del navegador está configurado para que no sea mayor a 1200 px, abc muestra un ancho de 900 px*/@media screen y (max-width: 901px) {?.abc {width: 200px;} ?}?/* Cuando el ancho del navegador está configurado para que no sea mayor a 901 px. abc muestra un ancho de 200 px*/@media screen y (max-width: 500px) {?.abc {width: 100px;} ?}?/* Cuando el ancho del navegador está configurado en no exceda los 500 px, abc muestra un ancho de 100 px */? Necesito prestar atención Es el orden del código CSS, y el CSS se escribe de grande a pequeño (cuanto mayor es el ancho del navegador, más alto se coloca). de 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 }? La versión anterior de IE no admite el ancho máximo, por lo que debe escribirse: img { width: 100 }; p>
Quinto, ¿usar un tamaño de fuente relativo? Las fuentes no pueden usar un tamaño absoluto (px), sino solo un 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.