Directorio de artigos
Como mostra CSS móbiles sensibles a diferentes deseños de resposta á pantalla @media segundo diferentes resolucións?
O seguinte artigo presentará como usar CSS para determinar diferentes resolucións e mostrar diferentes deseños de ancho para conseguir un ancho adaptativo.
Os amigos que o precisen poden consultar, espero que sexa útil para todos.
A diferenza entre as páxinas web de serigrafía @media e @media
- Se o css debe usarse nun dispositivo de impresión, use @media, se non, use @media screen.
- Non obstante, isto non é necesariamente certo. De feito, se substitúe "pantalla" por "imprimir" e o escribe como @media print, entón o CSS pódese usar no dispositivo de impresión;
- Pero teña en conta que o css declarado por @media print só é válido en dispositivos de impresión.
1. Descrición de casos pequenos DIVCSS
Primeiro establecemos un CSS de caixa DIV chamado ".abc", establecemos a súa altura en 300px e establecemos o bordo CSS en negro;
- e axustes
margin:0 autoO deseño está centrado e estes dous estilos están preestablecidos para facilitar a visualización.
Arrastramos manualmente o navegador para mostrar o ancho e despois observamos como cambia o ancho da caixa:
- Cando o ancho do navegador se axusta a un ancho non superior a 500 px, móstranse 100 px correspondente ao ancho da caixa;
- Cando o ancho do navegador se axusta a menos de 901 px, móstrase ".abc" correspondente ao ancho da caixa, que mostra 200 px;
- Cando o ancho do navegador se axusta para que sexa superior a 1201 px, o ancho do obxecto da caixa mostra 1200 px;
- Cando é inferior a 1200 píxeles, o ancho da pantalla é de 900 píxeles.
2, código adaptativo do terminal móbil do teléfono móbil 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宽度 */- Cómpre ter en conta que a orde do código CSS está formando CSS de grande a pequeno (xulgando que canto maior sexa o ancho do navegador, maior será a fronte).
- Isto é debido á relación lóxica, o xuízo de @media sobre a depuración de CSS fará que o xuízo 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 do dispositivo
- device-aspect-ratio pódese usar para axustar dispositivos con relacións de aspecto de pantalla específicas, o que tamén é unha propiedade útil.
- Por exemplo, a nosa páxina quere definir un estilo para pantallas normais cunha relación de aspecto de 4:3.
- A continuación, para as pantallas panorámicas 16:9 e 16:10, define outro estilo, como ancho adaptativo e ancho fixo:
- Pantalla só @media e (relación de aspecto do dispositivo: 4/3)
4. Compatible cos principais navegadores HTML + CSS + código fonte 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>O anterior é o CSS adaptativo do terminal móbil, que mostra diferentes contidos detallados de resposta á pantalla @media segundo diferentes pantallas.
Blog de Hope Chen Weiliang ( https://www.chenweiliang.com/ ) Compartiu "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", que é útil para ti.
Benvido a compartir a ligazón deste artigo:https://www.chenweiliang.com/cwl-2074.html
Benvido á canle de Telegram do blog de Chen Weiliang para recibir as últimas actualizacións.
📚 Esta guía contén un gran valor, 🌟Esta é unha oportunidade rara, non a perdas! ⏰⌛💨
Comparte e da like se che gusta!
O teu compartir e gústame son a nosa motivación continua!