Directory artaigil
Ciamar a tha CSS freagairteach gluasadach a’ taisbeanadh diofar chruthan freagairteach sgrion @media a rèir diofar rùintean?
Bheir an artaigil a leanas a-steach mar a chleachdas tu CSS gus diofar rùintean a dhearbhadh agus dealbhadh leud eadar-dhealaichte a thaisbeanadh gus leud atharrachail a choileanadh.
Faodaidh caraidean ann an èiginn iomradh a thoirt air, tha mi an dòchas gum bi e cuideachail don h-uile duine.
An diofar eadar @media agus @media sgrion clò-bhualadh duilleagan lìn
- Ma dh'fheumas an css a bhith air a chleachdadh ann an inneal clò-bhualaidh, cleachd @media, air neo, cleachd @media screen.
- Gu dearbh, ma chuireas tu "print" an àite "screen" agus ma sgrìobhas tu e mar @media print, faodar an CSS a chleachdadh air an inneal clò-bhualaidh;
- Ach thoir an aire nach eil an css a chaidh ainmeachadh le @media print dligheach ach air innealan clò-bhualaidh.
1. Tuairisgeul cùis bheag DIVCSS
Shuidhich sinn an toiseach bogsa DIV CSS leis an ainm “.abc”, shuidhich sinn an àirde aige gu 300px, agus shuidhich sinn crìoch CSS gu dubh;
- agus suidheachaidhean
margin:0 autoTha an cruth sa mheadhan, agus tha an dà stoidhle seo ro-shuidhichte airson a bhith furasta fhaicinn.
Bidh sinn a 'slaodadh a' bhrabhsair le làimh gus an leud a thaisbeanadh, agus an uairsin coimhead air mar a tha leud a 'bhogsa ag atharrachadh:
- Nuair a thèid leud a’ bhrabhsair atharrachadh gu leud nach eil nas motha na 500px, tha 100px air a thaisbeanadh a rèir leud a’ bhogsa;
- Nuair a thèid leud a 'bhrabhsair atharrachadh gu bhith nas lugha na 901px, tha ".abc" air a thaisbeanadh a rèir leud a' bhogsa, a tha a 'taisbeanadh 200px;
- Nuair a thèid leud a’ bhrobhsair atharrachadh gu bhith nas motha na 1201px, tha leud nì a’ bhogsa a’ taisbeanadh 1200px;
- Nuair a tha e nas lugha na 1200px, is e leud an taisbeanaidh 900px.
2, còd atharrachail inneal-làimhe fòn-làimhe 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宽度 */- Bu chòir a thoirt fa-near gu bheil òrdugh còd CSS a’ clò-bhualadh CSS bho mhòr gu beag (a ’breithneachadh mar as motha leud a’ bhrobhsair, is ann as àirde an aghaidh).
- Tha seo air sgàth an dàimh loidsigeach, bidh breithneachadh @media air debugging CSS ag adhbhrachadh gum fàilnich am breithneachadh.
3. Còd 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>Nota: inneal-taobh-co-mheas
- faodar co-mheas inneal-taobh a chleachdadh gus innealan a chuir a-steach le co-mheasan sealladh sgrion sònraichte, a tha cuideachd na sheilbh fheumail.
- Mar eisimpleir, tha an duilleag againn airson stoidhle a mhìneachadh airson scrionaichean àbhaisteach le co-mheas taobh de 4: 3.
- An uairsin airson sgàilean farsaing 16:9 agus 16:10, mìnich stoidhle eile, leithid leud atharrachail agus leud stèidhichte:
- Sgrion @media a-mhàin agus (co-mheas-taobh-inneal: 4/3)
4. Co-chòrdail ri prìomh bhrobhsairean còd stòr HTML+ CSS+ JS
<!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>Is e an rud gu h-àrd an CSS atharrachail terminal gluasadach, a tha a’ taisbeanadh diofar shusbaint freagairteach sgrion @media a rèir diofar scrionaichean.
An dòchas blog Chen Weiliang ( https://www.chenweiliang.com/ ) Co-roinnte “Mobile Adaptive CSS Sgrion eadar-dhealaichte a’ taisbeanadh diofar @media Screen Responsiveness”, a tha cuideachail dhut.
Fàilte gus ceangal an artaigil seo a cho-roinn:https://www.chenweiliang.com/cwl-2074.html
Fàilte don t-sianal Telegram de bhlog Chen Weiliang gus na h-ùrachaidhean as ùire fhaighinn!
📚 Tha luach mòr anns an stiùireadh seo, 🌟 Is e cothrom ainneamh a tha seo, na caill e! ⏰⌛💨
Roinn agus toil ma thogras tu!
Is e do roinneadh agus do rudan mar ar brosnachadh leantainneach!