Cómo utilizar @media para adaptar el teléfono móvil

Primero observe el siguiente código, que se recorre desde bootstrap. El ancho mínimo es

768, 992 y 1200. Por supuesto, en el pasado, algunos dispositivos tenían un ancho de 600-480, y clasificamos aquellos con resoluciones pequeñas como menos de 767. ¿Por qué es menor que 767 en lugar de 768? Eso es porque en CSS @media (ancho mínimo: 768px) significa que el mínimo es 768, que es >=768. Es igual a aquí, por lo que usamos @media (max -. ancho: 767px) aquí significa <=767 no habrá conflicto

De lo anterior podemos ver que hay varias resoluciones de puntos críticos, luego podemos escribir fácilmente la nuestra propia Adaptada al código

@media (ancho mínimo: 768 px){ //>=768 dispositivo}

@media (ancho mínimo: 992 px){ //>=992 dispositivo}

@media (min-width: 1200){ //>=1200 dispositivo}

Presta atención al orden si pones @media (min-width: 768px) escrito a continuación es tan trágico,

@media (ancho mínimo: 1200){ //>=1200 dispositivo}

@media (ancho mínimo: 992px) { //>=992 dispositivo}

@media (min-width: 768px){ //>=768 dispositivo}

Porque si es 1440, desde 1440>768 entonces su 1200 no será válido.

Entonces, cuando usamos el ancho mínimo, los pequeños están arriba y los grandes abajo. De manera similar, si usamos el ancho máximo, los grandes están arriba y los pequeños. en la parte inferior.

@media (max-width: 1199){ //<=1199 dispositivo}

@media (max-width: 991px){ //<=991 dispositivo}

@media (max-width: 767px){ //<=768 dispositivo}

Después del aprendizaje introductorio anterior, podemos usar aplicaciones híbridas avanzadas de manera flexible

@pantalla multimedia y (ancho mínimo:1200px){ #página{ ancho: 1100px; }#content,.div1{ancho: 730px;}#secundario{ancho:310px} }

@ pantalla multimedia y (ancho mínimo: 960 px) y (ancho máximo: 1199 px) { #page{ ancho: 960 px; :200px } }

@media screen y (ancho mínimo: 768px) y (ancho máximo: 959px) { #page{ ancho: 900px;}#content,.div1{ancho: 620px;} #secundario {ancho:220px}seleccione{ancho máximo:180px} }

@pantalla solo multimedia y (ancho mínimo: 480px) y (ancho máximo: 767px){ #página{ ancho: 450px } #content,.div1{ancho: 420px;posición: relativa; }#secundario{display:none}#access{width: 450px;#access a {padding-right:5px}#access a img{display:none; }# rss{display:none}#branding #s{display:none} }

@pantalla solo de medios y (ancho máximo: 479 px) { #página{ ancho: }#contenido,. div1{ ancho: 300px;}#secundario{display:none}#access{width: 330px;} #accede a {padding-right:10px;padding-left:10px}#accede a una img{display:none}#rss{ display: none}#branding #s{display:none}#access ul ul a{width:100px} }

4

La pantalla se usa en el código anterior. El monitor se especifica como pantalla. El dispositivo también puede ser una impresora de impresión u otros dispositivos. Generalmente usamos pantalla. O omitirlo por completo. Si desea ver una explicación detallada sobre los medios, puede consultar Baidu para obtener más información sobre la consulta de medios.