Artikelgids
Hoe vertoon mobiele responsiewe CSS verskillende @media-skermresponsiewe uitlegte volgens verskillende resolusies?
Die volgende artikel sal bekendstel hoe om CSS te gebruik om verskillende resolusies te bepaal en verskillende breedte-uitlegte te vertoon om aanpasbare breedte te verkry.
Vriende in nood kan daarna verwys, ek hoop dit sal vir almal nuttig wees.
Die verskil tussen @media- en @media-skermdruk-webbladsye
- As die css in 'n druktoestel gebruik moet word, gebruik @media, anders gebruik @media skerm.
- Dit is egter nie noodwendig waar nie. Trouens, as jy "skerm" met "druk" vervang en dit as @media-druk skryf, dan kan die CSS op die druktoestel gebruik word;
- Maar let daarop dat die css wat deur @media-druk verklaar word, slegs geldig is op druktoestelle.
1. DIVCSS klein gevalbeskrywing
Ons stel eers 'n DIV-boks CSS genaamd ".abc", stel sy hoogte op 300px, en stel die CSS-grens op swart;
- en instellings
margin:0 autoDie uitleg is gesentreer, en hierdie twee style is vooraf ingestel vir maklike besigtiging.
Ons sleep die blaaier handmatig om die breedte te vertoon, en sien dan hoe die breedte van die boks verander:
- Wanneer die breedte van die blaaier aangepas word tot 'n breedte van nie meer as 500px nie, word 100px vertoon wat ooreenstem met die breedte van die boks;
- Wanneer die breedte van die blaaier aangepas word om minder as 901px te wees, word ".abc" vertoon wat ooreenstem met die breedte van die blokkie, wat 200px vertoon;
- Wanneer die blaaierwydte aangepas word om groter as 1201px te wees, vertoon die breedte van die boksvoorwerp 1200px;
- Wanneer dit minder as 1200px is, is die vertoonwydte 900px.
2, CSS selfoon mobiele terminale aanpasbare kode
.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宽度 */- Daar moet kennis geneem word dat die CSS-kodeorde CSS van groot na klein tik (te oordeel dat hoe groter die blaaierwydte, hoe hoër die voorkant).
- Dit is as gevolg van die logiese verhouding, @media se oordeel van CSS-ontfouting sal veroorsaak dat die oordeel misluk.
3. HTML-kode
<!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>Let wel: toestel-aspek-verhouding
- toestel-aspekverhouding kan gebruik word om toestelle met spesifieke skermaspekverhoudings te pas, wat ook 'n nuttige eienskap is.
- Ons bladsy wil byvoorbeeld 'n styl vir normale skerms met 'n aspekverhouding van 4:3 definieer.
- Definieer dan 'n ander styl vir 16:9 en 16:10 wye skerms, soos aanpasbare breedte en vaste breedte:
- @slegs media skerm en (toestel-aspekverhouding:4/3)
4. Versoenbaar met groot blaaiers HTML+CSS+JS bronkode
<!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>Bogenoemde is die mobiele terminale aanpasbare CSS, wat verskillende @media-skermresponsiewe gedetailleerde inhoud volgens verskillende skerms vertoon.
Hoop Chen Weiliang Blog ( https://www.chenweiliang.com/ ) het "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsive" gedeel, wat vir jou nuttig is.
Welkom om die skakel van hierdie artikel te deel:https://www.chenweiliang.com/cwl-2074.html
Welkom by die Telegram-kanaal van Chen Weiliang se blog om die nuutste opdaterings te kry!
📚 Hierdie gids bevat groot waarde, 🌟Dit is 'n seldsame geleentheid, moet dit nie misloop nie! ⏰⌛💨
Share en like as jy wil!
Jou deel en laaiks is ons voortdurende motivering!