Directorio de artículos
¿Cómo muestra CSS adaptable a dispositivos móviles diferentes diseños receptivos de pantalla de @media de acuerdo con las diferentes resoluciones?
El siguiente artículo presentará cómo usar CSS para determinar diferentes resoluciones y mostrar diferentes diseños de ancho para lograr un ancho adaptable.
Los amigos que lo necesiten pueden consultarlo, espero que sea útil para todos.
La diferencia entre @media y @media páginas web de serigrafía
- Si el css debe usarse en un dispositivo de impresión, use @media, de lo contrario, use la pantalla @media.
- Sin embargo, esto no es necesariamente cierto. De hecho, si reemplaza "pantalla" con "imprimir" y lo escribe como @media print, entonces el CSS se puede usar en el dispositivo de impresión;
- Pero tenga en cuenta que el css declarado por @media print solo es válido en dispositivos de impresión.
1. Descripción del estuche pequeño DIVCSS
Primero establecemos un cuadro DIV CSS llamado ".abc", establecemos su altura en 300 px y establecemos el borde CSS en negro;
- y ajustes
margin:0 autoEl diseño está centrado y estos dos estilos están preestablecidos para facilitar la visualización.
Arrastramos manualmente el navegador para mostrar el ancho, y luego observamos cómo cambia el ancho del cuadro:
- Cuando el ancho del navegador se ajusta a un ancho de no más de 500 px, se muestran 100 px correspondientes al ancho del cuadro;
- Cuando el ancho del navegador se ajusta para que sea inferior a 901 px, se muestra ".abc" correspondiente al ancho del cuadro, que muestra 200 px;
- Cuando el ancho del navegador se ajusta para que sea mayor a 1201 px, el ancho del objeto de cuadro muestra 1200 px;
- Cuando es inferior a 1200 px, el ancho de visualización es de 900 px.
2, código adaptable de terminal móvil de teléfono móvil CSS
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- Cabe señalar que el orden del código CSS es escribir CSS de mayor a menor (considerando que cuanto mayor sea el ancho del navegador, mayor será el frente).
- Esto se debe a la relación lógica, el juicio de @media sobre la depuración de CSS hará que el juicio falle.
3. código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>Nota: relación de aspecto del dispositivo
- device-aspect-ratio se puede usar para ajustar dispositivos con proporciones de aspecto de pantalla específicas, que también es una propiedad útil.
- Por ejemplo, nuestra página quiere definir un estilo para pantallas normales con una relación de aspecto de 4:3.
- Luego, para pantalla panorámica de 16:9 y 16:10, defina otro estilo, como ancho adaptable y ancho fijo:
- @media solo pantalla y (relación de aspecto del dispositivo: 4/3)
4. Compatible con los principales navegadores Código fuente HTML+CSS+JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>Lo anterior es el CSS adaptativo del terminal móvil, que muestra diferentes contenidos detallados sensibles a la pantalla @media de acuerdo con las diferentes pantallas.
Esperanza Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Compartido "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", que es útil para usted.
Bienvenido a compartir el enlace de este artículo:https://www.chenweiliang.com/cwl-2074.html
¡Bienvenido al canal de Telegram del blog de Chen Weiliang para obtener las últimas actualizaciones!
📚 Esta guía contiene un gran valor. 🌟Esta es una oportunidad única, ¡no la pierdas! ⏰⌛💨
¡Comparte y dale me gusta si te gusta!
¡Su compartir y Me gusta son nuestra motivación continua!