Greinaskrá
Hvernig sýnir móttækilegur CSS mismunandi @media skjár móttækilegur skipulag í samræmi við mismunandi upplausnir?
Eftirfarandi grein mun kynna hvernig á að nota CSS til að ákvarða mismunandi upplausnir og sýna mismunandi breiddarskipulag til að ná aðlögunarbreidd.
Vinir í neyð geta vísað til þess, ég vona að það komi öllum að gagni.
Munurinn á @media og @media skjáprentun vefsíðum
- Ef nota þarf css í prentunartæki, notaðu @media, annars notaðu @media screen.
- Hins vegar er þetta ekki endilega satt. Reyndar, ef þú skiptir út "skjá" fyrir "prenta" og skrifar það sem @media print, þá er hægt að nota CSS á prentunartækinu;
- En athugaðu að css sem @media print gefur upp gildir aðeins á prentunartækjum.
1. DIVCSS lítil tilvikslýsing
Við settum fyrst DIV box CSS sem heitir ".abc", stilltum hæð hans á 300px og stilltum CSS ramma á svart;
- og stillingar
margin:0 autoÚtlitið er fyrir miðju og þessir tveir stílar eru forstilltir til að auðvelda sýn.
Við drögum vafrann handvirkt til að sýna breiddina og fylgjumst síðan með hvernig breidd kassans breytist:
- Þegar breidd vafrans er stillt á breidd sem er ekki meira en 500px, birtist 100px sem samsvarar breidd kassans;
- Þegar breidd vafrans er stillt til að vera minni en 901px, birtist ".abc" sem samsvarar breidd kassans, sem sýnir 200px;
- Þegar breidd vafrans er stillt til að vera meiri en 1201px sýnir breidd kassahlutarins 1200px;
- Þegar það er minna en 1200px er skjábreiddin 900px.
2, CSS farsíma farsíma flugstöðinni aðlögunarkóði
.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宽度 */- Það skal tekið fram að CSS kóða röðin er að stilla CSS frá stórum í smá (miðað við að því stærri sem vafrabreidd er, því hærra er framhliðin).
- Þetta er vegna rökréttu sambandsins, dómur @media um CSS kembiforrit mun valda því að dómurinn mistakast.
3. HTML kóða
<!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>Athugið: tæki-hlutfall
- device-aspect-ratio er hægt að nota til að passa tæki með sérstökum skjáhlutföllum, sem er líka gagnlegur eiginleiki.
- Til dæmis vill síðan okkar skilgreina stíl fyrir venjulega skjái með stærðarhlutfallinu 4:3.
- Skilgreindu síðan annan stíl fyrir 16:9 og 16:10 breiðskjá, eins og aðlögunarbreidd og fasta breidd:
- @media only skjár og (device-aspect-ratio:4/3)
4. Samhæft við helstu vafra HTML+CSS+JS frumkóða
<!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>Ofangreint er aðlagandi CSS fyrir farsímastöðina, sem sýnir mismunandi @media skjár móttækilegt ítarlegt efni í samræmi við mismunandi skjái.
Hope Chen Weiliang blogg ( https://www.chenweiliang.com/ ) Samnýtt „Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness“, sem er gagnlegt fyrir þig.
Velkomið að deila tengli þessarar greinar:https://www.chenweiliang.com/cwl-2074.html
Velkomin á Telegram rásina á bloggi Chen Weiliang til að fá nýjustu uppfærslurnar!
📚 Þessi handbók inniheldur mikið gildi, 🌟Þetta er sjaldgæft tækifæri, ekki missa af því! ⏰⌛💨
Deildu og likeðu ef þú vilt!
Deiling þín og líkar við eru stöðug hvatning okkar!