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 auto
Tá 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!