Directori d'articles
Com el CSS responsiu per a mòbils mostra diferents dissenys responsius de la pantalla @media segons diferents resolucions?
L'article següent presentarà com utilitzar CSS per determinar diferents resolucions i mostrar diferents dissenys d'amplada per aconseguir una amplada adaptativa.
Els amics que ho necessiten poden consultar-lo, espero que sigui útil per a tothom.
La diferència entre les pàgines web de serigrafia @media i @media
- Si cal utilitzar el css en un dispositiu d'impressió, utilitzeu @media, en cas contrari, utilitzeu @media screen.
- Tanmateix, això no és necessàriament cert, de fet, si substituïu "pantalla" per "imprimir" i l'escriu com a @media print, el CSS es pot utilitzar al dispositiu d'impressió;
- Però tingueu en compte que el css declarat per @media print només és vàlid en dispositius d'impressió.
1. Descripció del cas petit DIVCSS
Primer vam establir un quadre DIV CSS anomenat ".abc", vam establir la seva alçada a 300 px i la vora del CSS en negre;
- i configuracions
margin:0 autoEl disseny està centrat i aquests dos estils estan preestablerts per facilitar la visualització.
Arrossegem manualment el navegador per mostrar l'amplada, i després observem com canvia l'amplada del quadre:
- Quan l'amplada del navegador s'ajusta a una amplada no superior a 500 px, es mostra 100 px corresponent a l'amplada del quadre;
- Quan l'amplada del navegador s'ajusta a menys de 901 px, es mostra ".abc" corresponent a l'amplada del quadre, que mostra 200 px;
- Quan l'amplada del navegador s'ajusta per ser superior a 1201 px, l'amplada de l'objecte quadre mostra 1200 px;
- Quan és inferior a 1200 píxels, l'amplada de la pantalla és de 900 píxels.
2, codi adaptatiu de terminal mòbil de telèfon 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宽度 */- Cal tenir en compte que l'ordre del codi CSS està escrivint CSS de gran a petit (a jutjar que com més gran sigui l'amplada del navegador, més gran serà la part frontal).
- Això es deu a la relació lògica, el judici de @media sobre la depuració de CSS farà que el judici falli.
3. Codi 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ó d'aspecte del dispositiu
- device-aspect-ratio es pot utilitzar per adaptar-se a dispositius amb proporcions d'aspecte de pantalla específiques, que també és una propietat útil.
- Per exemple, la nostra pàgina vol definir un estil per a pantalles normals amb una relació d'aspecte de 4:3.
- A continuació, per a la pantalla ampla de 16:9 i 16:10, definiu un altre estil, com ara l'amplada adaptativa i l'amplada fixa:
- Pantalla només @media i (relació d'aspecte del dispositiu: 4/3)
4. Compatible amb els principals navegadors HTML+CSS+JS codi font
<!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>L'anterior és el CSS adaptatiu del terminal mòbil, que mostra diferents continguts detallats amb resposta a la pantalla @media segons diferents pantalles.
Bloc d'Hope Chen Weiliang ( https://www.chenweiliang.com/ ) Compartit "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", que us és útil.
Benvingut a compartir l'enllaç d'aquest article:https://www.chenweiliang.com/cwl-2074.html
Benvingut al canal de Telegram del bloc de Chen Weiliang per rebre les últimes actualitzacions!
📚 Aquesta guia té un gran valor, 🌟Aquesta és una oportunitat rara, no la perdis! ⏰⌛💨
Comparteix i m'agrada si t'agrada!
Els vostres likes i compartir són la nostra motivació contínua!