Sengoli sa Lingoloa
CSS e arabelang ka mehala e bonts'a joang litlhophiso tse fapaneng tsa @media skrineng ho latela liqeto tse fapaneng?
Sengoloa se latelang se tla hlahisa mokhoa oa ho sebelisa CSS ho tseba liqeto tse fapaneng le ho bonts'a meralo e fapaneng ea bophara ho fihlela bophara bo feto-fetohang.
Metsoalle e hlokang e ka bua ka eona, ke tšepa hore e tla thusa motho e mong le e mong.
Phapang lipakeng tsa maqephe a tepo a @media le @media skrineng sa khatiso
- Haeba css e hloka ho sebelisoa sesebelisoa sa khatiso, sebelisa @media, ho seng joalo, sebelisa @media skrineng.
- Leha ho le joalo, sena ha se 'nete.Ha e le hantle, haeba u fetola "skrine" ka "print"' me u e ngola e le @media print, joale CSS e ka sebelisoa mochine oa khatiso;
- Empa ela hloko, css e phatlalalitsoeng ke @media print e sebetsa feela lisebelisoa tsa khatiso.
1. Tlhaloso ea nyeoe e nyane ea DIVCSS
Re qala ka ho beha lebokose la DIV CSS le bitsoang ".abc", le behile bophahamo ba lona ho 300px, 'me le behile moeli oa CSS ho ba batšo;
- le litlhophiso
margin:0 autoSebopeho se tsepamisitsoe, 'me mefuta ena e' meli e se e setiloe esale pele hore e bonoe habonolo.
Re hula sebatli ka letsoho ho bonts'a bophara, ebe re bona hore na bophara ba lebokose bo fetoha joang:
- Ha bophara ba sebatli bo fetotsoe ho ba bophara bo sa feteng 500px, 100px e bonts'oa e tsamaellanang le bophara ba lebokose;
- Ha bophara ba sebatli bo lokisoa hore bo be ka tlase ho 901px, ".abc" e hlahisoa e tsamaellana le bophara ba lebokose, le bonts'ang 200px;
- Ha bophara ba sebatli bo lokisoa hore bo be kholo ho feta 1201px, bophara ba ntho ea lebokose bo hlahisoa e le 1200px;
- Ha e le ka tlase ho 1200px, bophara ba pontšo ke 900px.
2, CSS mobile phone terminal adaptive code
.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宽度 */- Ho lokela ho hlokomeloa hore taelo ea khoutu ea CSS ke ho hlophisa CSS ho tloha ho tse kholo ho ea ho tse nyenyane (ho ahlola hore bophara ba sebatli se seholo, bo ka pele bo phahame).
- Sena ke ka lebaka la kamano e utloahalang, kahlolo ea @ media ea CSS debugging e tla etsa hore kahlolo e hlōlehe.
3. HTML khoutu
<!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>Tlhokomeliso: tekanyo-karolelano ea lisebelisoa
- Sesebediswa-karolelano-karolelano e ka sebelisoa ho lekana lisebelisoa tse nang le likarolo tse ikhethileng tsa skrini, tseo hape e leng thepa ea bohlokoa.
- Mohlala, leqephe la rona le batla ho hlalosa mokhoa oa li-skrini tse tloaelehileng tse nang le karolo ea 4:3.
- Ebe bakeng sa 16:9 le 16:10 sekirini se sephara, hlalosa setaele se seng, joalo ka bophara bo feto-fetohang le bophara bo tsitsitseng:
- @media feela skrine le (karolelano ea sesebelisoa:4/3)
4. E lumellana le libatli tse kholo tsa HTML+CSS+JS khoutu ea mohloli
<!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>Ka holimo ke CSS e sebetsang ea selefouno, e bonts'ang litaba tse fapaneng tsa @media skrineng se arabelang ho latela li-skrini tse fapaneng.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Shared "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", e leng thuso ho uena.
Rea u amohela ho arolelana sehokelo sa sengoloa sena:https://www.chenweiliang.com/cwl-2074.html
Rea u amohela ho mocha oa Telegraph oa blog ea Chen Weiliang ho fumana lintlha tsa morao-rao!
📚 Tataiso ena e na le boleng bo boholo, 🌟Ona ke monyetla o sa tloaelehang, se ke oa o fetoa! ⏰⌛💨
Share le rata haeba u rata!
Ho arolelana le lintho tseo u li ratang ke khothatso ea rona e tsoelang pele!