Eolaire Eolaire
Conas a thaispeánann CSS sofhreagrach soghluaiste leagan amach sofhreagrach scáileáin @media éagsúla de réir rúin éagsúla?
Tabharfaidh an t-alt seo a leanas isteach conas CSS a úsáid chun rúin éagsúla a chinneadh agus leagan amach leithead difriúil a thaispeáint chun leithead oiriúnaitheach a bhaint amach.
Is féidir le cairde i ngátar tagairt a dhéanamh dó, tá súil agam go mbeidh sé ina chuidiú do gach duine.
An difríocht idir leathanaigh ghréasáin priontála scáileáin @media agus @media
- Más gá an CSS a úsáid i ngléas priontála, bain úsáid as @media, nó bain úsáid as scáileán @media.
- Mar sin féin, ní gá go bhfuil sé seo fíor. Go deimhin, má chuireann tú "priontáil" in ionad "scáileán" agus má scríobhann tú mar @media print é, is féidir an CSS a úsáid ar an ngléas priontála;
- Ach tabhair faoi deara nach bhfuil an CSS dearbhaithe ag @media print bailí ach ar fheistí priontála.
1. Cur síos ar chás beag DIVCSS
Shocraigh muid CSS bosca DIV ar a dtugtar ".abc" ar dtús, a airde a shocrú go 300px, agus an teorainn CSS a shocrú go dubh;
- agus socruithe
margin:0 autoTá an leagan amach dírithe, agus tá an dá stíl seo réamh-socraithe le haghaidh féachana éasca.
Tarraingimid an brabhsálaí de láimh chun an leithead a thaispeáint, agus ansin breathnaimid ar an gcaoi a n-athraíonn leithead an bhosca:
- Nuair a dhéantar leithead an bhrabhsálaí a choigeartú go leithead nach mó ná 500px, taispeántar 100px a fhreagraíonn do leithead an bhosca;
- Nuair a choigeartaítear leithead an bhrabhsálaí le bheith níos lú ná 901px, taispeántar ".abc" a fhreagraíonn do leithead an bhosca, a thaispeánann 200px;
- Nuair a choigeartaítear leithead an bhrabhsálaí le bheith níos mó ná 1201px, taispeánann leithead réad an bhosca 1200px;
- Nuair a bhíonn sé níos lú ná 1200px, is é 900px an leithead taispeána.
2, cód oiriúnaitheach críochfoirt fón póca 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宽度 */- Ba chóir a thabhairt faoi deara go bhfuil an t-ordú cód CSS ag clóchur CSS ó bheag go mór (ag cur san áireamh dá mhéad leithead an bhrabhsálaí, is airde an tosach).
- Tá sé seo mar gheall ar an gcaidreamh loighciúil, beidh breithiúnas @media ar debugging CSS ina chúis le teip ar an mbreithiúnas.
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>Nóta: gléas-gné-cóimheas
- is féidir cóimheas gné-gléas a úsáid chun feistí a fheistiú le cóimheasa gné-scáileáin ar leith, ar airíonna úsáideach é freisin.
- Mar shampla, tá ár leathanach ag iarraidh stíl a shainiú do ghnáthscáileáin le cóimheas gné de 4:3.
- Ansin le haghaidh scáileán leathan 16:9 agus 16:10, sainmhínigh stíl eile, mar leithead oiriúnaitheach agus leithead seasta:
- scáileán @media amháin agus (cóimheas gné-gléas:4/3)
4. Ag luí leis na brabhsálaithe móra HTML+CS+ JS cód foinse
<!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 é an méid thuas ná an CSS oiriúnaitheach críochfoirt soghluaiste, a thaispeánann ábhar mionsonraithe sofhreagrach scáileáin @media éagsúla de réir scáileáin éagsúla.
Tá súil agam Blag Chen Weiliang ( https://www.chenweiliang.com/ ) Roinnte "Mobile Adaptive CSS Scáileáin Éagsúla Taispeáin Éagsúla @media Screen Responsiveness", atá cabhrach a thabhairt duit.
Fáilte romhat nasc an ailt seo a roinnt:https://www.chenweiliang.com/cwl-2074.html
Fáilte chuig cainéal Telegram de bhlag Chen Weiliang chun na nuashonruithe is déanaí a fháil!
📚 Tá luach ollmhór sa treoir seo, 🌟 Seo deis annamh, ná caill é! ⏰⌛💨
Roinnigí agus más maith libh!
Is iad do chomhroinnt agus do thaitin ár spreagadh leanúnach!