Littafin Adireshi
Ta yaya CSS mai amsa wayar hannu ke nuna daban-daban @media allon mayar da shimfidu bisa ga kudurori daban-daban?
Labari mai zuwa zai gabatar da yadda ake amfani da CSS don tantance kudurori daban-daban da kuma nuna shimfidu daban-daban na faɗi don cimma faɗin daidaitacce.
Abokan da suke bukata za su iya komawa gare shi, ina fatan zai zama mai taimako ga kowa.
Bambanci tsakanin @media da @media buga shafukan yanar gizo
- Idan css yana buƙatar amfani da na'urar bugu, yi amfani da @media, in ba haka ba, yi amfani da allon @media.
- Duk da haka, wannan ba lallai ba ne gaskiya, a gaskiya, idan ka maye gurbin "screen" da "print" kuma ka rubuta shi a matsayin @media print, to ana iya amfani da CSS akan na'urar bugawa;
- Amma lura cewa css da @media print ya bayyana yana aiki ne kawai akan na'urorin bugu.
1. DIVCSS ƙananan kwatancin shari'a
Mun fara saita akwatin DIV CSS mai suna ".abc", saita tsayinsa zuwa 300px, sannan muka saita iyakar CSS zuwa baki;
- da saituna
margin:0 autoTsarin yana a tsakiya, kuma an riga an tsara waɗannan salo guda biyu don kallo cikin sauƙi.
Muna jan burauzar da hannu don nuna faɗin, sannan mu lura da yadda faɗin akwatin ke canzawa:
- Lokacin da aka daidaita nisa na mai binciken zuwa nisa wanda bai wuce 500px ba, ana nuna 100px daidai da faɗin akwatin;
- Lokacin da aka daidaita faɗin mai binciken don zama ƙasa da 901px, ana nuna ".abc" daidai da faɗin akwatin, wanda ke nuna 200px;
- Lokacin da aka daidaita nisa mai bincike don zama mafi girma fiye da 1201px, faɗin abin akwatin yana nuna 1200px;
- Lokacin da bai wuce 1200px ba, girman nuni shine 900px.
2, CSS wayar hannu ta hannu lambar daidaitawa
.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宽度 */- Ya kamata a lura da cewa tsarin lambar CSS yana buga CSS daga babba zuwa ƙarami (la'akari da cewa girman faɗin mai binciken, mafi girman gaba).
- Wannan saboda alaƙar ma'ana, hukuncin @media na yanke hukunci na CSS zai sa hukuncin ya gaza.
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>Note: na'urar-bangaren-rabobin
- Ana iya amfani da na'urar-bangaren-ratio don dacewa da na'urori tare da takamaiman yanayin yanayin allo, wanda kuma dukiya ce mai amfani.
- Misali, shafinmu yana son ayyana salo don allo na yau da kullun tare da rabon al'amari na 4:3.
- Sannan don 16:9 da 16:10 mai faɗi, ayyana wani salo, kamar faɗin daidaitawa da tsayayyen faɗi:
- @media kawai allo da (na'urar-rabobin-ratio:4/3)
4. Mai jituwa tare da manyan masu bincike HTML+CSS+JS lambar tushe
<!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>Abin da ke sama shine CSS mai daidaitawa ta wayar hannu, wanda ke nuna daban-daban @media allon amsa cikakkun bayanai bisa ga allo daban-daban.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Shared "Mobile Adaptive CSS Daban-daban Screens Nuna Daban Amsar Allon @media", wanda ke taimaka muku.
Barka da zuwa raba hanyar haɗin wannan labarin:https://www.chenweiliang.com/cwl-2074.html
Barka da zuwa tashar Telegram na Chen Weiliang's blog don samun sabbin abubuwa!
📚 Wannan jagorar ya ƙunshi ƙima mai yawa, 🌟Wannan dama ce da ba kasafai ba, kar a rasa ta! ⏰⌛💨
Share da like idan kuna so!
Rarraba ku da abubuwan so sune ci gaba da ƙarfafa mu!