Tusaha Maqaalka
Sidee CSS-ka moobilka ka jawaaba u muujiyaa qaabab kala duwan oo ka jawaabaya shaashada @media iyadoo loo eegayo xalal kala duwan?
Maqaalka soo socdaa wuxuu soo bandhigi doonaa sida loo isticmaalo CSS si loo go'aamiyo xalal kala duwan oo loo muujiyo naqshado ballac oo kala duwan si loo gaaro ballac la-qabsiga.
Saaxiibada u baahan ayaa tixraaci kara, waxaan rajeynayaa inay waxtar u yeelan doonto qof walba.
Farqiga u dhexeeya @media iyo @media bogagga shabakadda daabacaadda shaashadda
- Haddii css-ku u baahan yahay in lagu isticmaalo aaladda daabacaadda, isticmaal @media, haddii kale, isticmaal shaashadda @media.
- Si kastaba ha ahaatee, tani maahan run, dhab ahaantii, haddii aad ku beddesho "screen" "print" oo aad u qorto sida @media print, markaa CSS-ga waxaa loo isticmaali karaa qalabka daabacaadda;
- Laakin ogow in css-ka uu ku dhawaaqay @media print uu ku shaqaynayo oo keliya qalabka daabacaadda.
1. DIVCSS sharaxaad yar oo kiis
Waxaan marka hore dejinay sanduuqa DIV CSS ee loogu magac daray ".abc", waxaanu dhignay dhererkiisa 300px, waxaanan dejinay xadka CSS madow;
- iyo goobaha
margin:0 autoQaabku waa udub dhexaad, labadan qaab-na waxaa loo sii dejiyay si fudud loo daawado.
Waxaanu gacanta ku jiidi browserka si aanu u muujino ballaca, ka dibna u fiirsado sida ballaca sanduuqu isu beddelo:
- Marka ballaca browserka lagu hagaajiyo ballac aan ka badnayn 500px, 100px ayaa la soo bandhigayaa oo u dhiganta ballaca sanduuqa;
- Marka ballaca browserka lagu hagaajiyo inuu ka yaraado 901px, ".abc" ayaa la soo bandhigayaa oo u dhiganta ballaca sanduuqa, kaas oo muujinaya 200px;
- Marka ballaca browserka lagu hagaajiyo inuu ka weyn yahay 1201px, ballaca shayga sanduuqa wuxuu muujinayaa 1200px;
- Marka ay ka yar tahay 1200px, balac muujintu waa 900px.
2, CSS telefoonka gacanta mobile terminal code la qabsiga
.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宽度 */- Waa in la ogaadaa in nidaamka code-ka CSS uu ku qorayo CSS ka weyn ilaa yar (marka la eego in ballaca browserka uu weyn yahay, uu sare u kaco).
- Tani waa sababta oo ah xiriirka macquulka ah, xukunka @media ee ku saabsan qaladka CSS wuxuu sababi doonaa xukunka inuu guuldareysto.
3. HTML code
<!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>Fiiro gaar ah: saamiga-qalabka
- Qalabka-aratio-saamiga-saamiga waxaa loo isticmaali karaa in lagu rakibo qalabyada leh saamiga dhinaca shaashadda, taas oo sidoo kale ah hanti faa'iido leh.
- Tusaale ahaan, boggayagu waxa uu rabaa in uu qeexo qaabka shaashadaha caadiga ah oo leh saami dhan 4:3.
- Kadibna 16:9 iyo 16:10 shaashad ballaadhan, qeex qaab kale, sida ballac la-qabsiga iyo ballac go'an:
- @media kaliya shaashada iyo (qalabka-aratio:4/3)
4. La jaanqaadi kara browser-yada waaweyn HTML+CSS+JS code code
<!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>Kan sare waa CSS-ka la qabsiga moobilka, kaas oo soo bandhigaya kala duwanaansho @media ah oo ka jawaabaya waxyaabo tafatiran oo faahfaahsan iyadoo loo eegayo shaashado kala duwan.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) la wadaagay "Mobile Adaptive CSS Shaashado Kala Duwan Waxay Muujiyeen Kaladuwan @media Screen Responsive", kaas oo adiga ku caawinaya.
Ku soo dhawoow inaad wadaagto xiriirka maqaalkan:https://www.chenweiliang.com/cwl-2074.html
Ku soo dhawoow kanaalka Telegramka ee Chen Weiliang's blog si aad u hesho wararkii ugu dambeeyay!
📚 Hagahan waxa uu ka kooban yahay qiimo aad u weyn, 🌟Tani waa fursad naadir ah, ha seegin! ⏰⌛💨
Share iyo like saar hadaad jeceshahay!
Wadaagistaada iyo jeceylkaaga ayaa ah dhiirigelintayada joogtada ah!