pelrêça gotarê
CSS-a bersivdar a mobîl çawa li gorî biryarên cihêreng sêwiranên bersivdar ên dîmendera @media nîşan dide?
Gotara jêrîn dê destnîşan bike ka meriv çawa CSS-ê bikar tîne da ku çareseriyên cihêreng destnîşan bike û sêwiranên firehiya cihêreng nîşan bide da ku bigihîje firehiya adaptive.
Hevalên hewcedar dikarin serî lê bidin, ez hêvî dikim ku ew ê ji her kesî re bibe alîkar.
Cûdahiya di navbera rûpelên malperê yên çapkirina ekrana @media û @media de
- Ger css hewce bike ku di cîhazek çapkirinê de were bikar anîn, @media bikar bînin, wekî din, ekrana @media bikar bînin.
- Lêbelê, ev ne hewce ne rast e. Bi rastî, heke hûn "screen" bi "print" veguherînin û wekî @media çapê binivîsin, wê hingê CSS dikare li ser cîhaza çapkirinê were bikar anîn;
- Lê zanibin ku css-ya ku ji hêla @media print ve hatî ragihandin tenê li ser cîhazên çapkirinê derbasdar e.
1. Danasîna doza piçûk DIVCSS
Me pêşî qutiyek DIV CSS ya bi navê ".abc" danî, bilindahiya wê danî 300px, û sînorê CSS-ê reş kir;
- û mîhengan
margin:0 autoPîvan navend e, û ev her du şêwaz ji bo dîtina hêsan ji berê ve hatine saz kirin.
Em bi destan gerokê dikişînin da ku firehiyê nîşan bide, û dûv re temaşe bikin ka firehiya qutîkê çawa diguhezîne:
- Dema ku firehiya gerokê bi firehiyek ne ji 500px ve were sererast kirin, 100px li gorî firehiya qutîkê tê xuyang kirin;
- Dema ku firehiya gerokê ji 901px kêmtir tê eyar kirin, ".abc" li gorî firehiya qutîkê tê nîşandan, ku 200px nîşan dide;
- Dema ku firehiya gerokê ji 1201px mezintir were sererast kirin, firehiya qertafa qutîkê 1200px nîşan dide;
- Dema ku ew ji 1200 px kêmtir be, firehiya xuyangê 900 px e.
2, koda adaptive ya termînala desta ya têlefonê desta 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宽度 */- Pêdivî ye ku were zanîn ku fermana koda CSS-ê CSS-ê ji mezin berbi piçûk dinivîse (dadbarkirin ku her ku firehiya gerokê mezintir be, pêşiyê jî bilindtir e).
- Ev ji ber pêwendiya mentiqî ye, dadbarkirina @media ya li ser xeletkirina CSS-ê dê bibe sedema têkçûna dadrêsê.
3. Koda 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>Nîşe: amûr-aspect-rêjeya
- Rêjeya amûr-alî dikare were bikar anîn da ku cîhazên bi rêjeyên dîmendera taybetî yên dîmenderê bicîh bikin, ku ev jî taybetmendiyek bikêr e.
- Mînakî, rûpela me dixwaze şêwazek ji bo ekranên normal bi rêjeya 4:3 diyar bike.
- Dûv re ji bo 16:9 û 16:10 dîmendera fireh, şêwazek din diyar bikin, wek firehiya adaptîf û firehiya sabît:
- Tenê dîmendera @media û (rêjeya cîhaz-aspect: 4/3)
4. Bi gerokên sereke HTML + CSS + JS koda çavkaniyê re hevaheng e
<!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>Ya jor CSS-a adaptive ya têlefonê ya desta ye, ku li gorî ekranên cihêreng naveroka hûrgulî ya bersivdar a @media-yê cihêreng destnîşan dike.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) "Ekranên CSS-ya Veguhezbar a Mobîl Bersivdariya Cûda ya ekrana @media" ya ku ji we re arîkar e, parve kir.
Bi xêr hatî bo parvekirina girêdana vê gotarê:https://www.chenweiliang.com/cwl-2074.html
Hûn bi xêr hatin kanala Telegramê ya bloga Chen Weiliang da ku nûvekirinên herî dawî bistînin!
📚 Ev rêber nirxek pir mezin dihewîne, 🌟Ev derfetek kêm e, wê ji dest nede! ⏰⌛💨
Heke hûn hez dikin parve bikin û hez bikin!
Parvekirin û ecibandinên we motîvasyona meya domdar e!