Tsab ntawv teev npe
mobile teb li cas CSS tso saib txawv @media screen teb layouts raws li cov kev daws teeb meem sib txawv?
Cov kab lus hauv qab no yuav qhia txog yuav ua li cas siv CSS los txiav txim siab sib txawv thiab ua kom pom qhov dav sib txawv kom ua tiav qhov dav dav.
Cov phooj ywg xav tau tuaj yeem xa mus rau nws, Kuv vam tias nws yuav pab tau rau txhua tus.
Qhov txawv ntawm @media thiab @media screen printing web pages
- Yog tias css yuav tsum tau siv rau hauv lub tshuab luam ntawv, siv @media, txwv tsis pub, siv @media screen.
- Txawm li cas los xij, qhov no tsis yog qhov tseeb, qhov tseeb, yog tias koj hloov "screen" nrog "print" thiab sau nws li @media print, ces CSS tuaj yeem siv rau ntawm lub tshuab luam ntawv;
- Tab sis nco ntsoov tias css tshaj tawm los ntawm @media print tsuas yog siv tau ntawm cov khoom siv luam ntawv xwb.
1. DIVCSS cov lus piav qhia me me
Peb thawj zaug teeb lub DIV lub thawv CSS lub npe ".abc", teem nws qhov siab rau 300px, thiab teem lub CSS ciam teb rau dub;
- thiab kev teeb tsa
margin:0 autoLub layout yog nruab nrab, thiab ob hom no yog pre-set rau yooj yim saib.
Peb manually luag tus browser los tso saib qhov dav, thiab tom qab ntawd saib seb qhov dav ntawm lub thawv hloov li cas:
- Thaum qhov dav ntawm qhov browser raug kho rau qhov dav ntawm qhov tsis ntau tshaj 500px, 100px tau tshwm sim raws li qhov dav ntawm lub thawv;
- Thaum qhov dav ntawm qhov browser raug kho kom tsawg dua 901px, ".abc" tshwm sim sib xws rau qhov dav ntawm lub thawv, uas qhia txog 200px;
- Thaum qhov dav ntawm qhov browser raug kho kom siab dua 1201px, qhov dav ntawm lub thawv khoom nthuav tawm 1200px;
- Thaum nws tsawg dua 1200px, qhov dav dav yog 900px.
2, CSS mobile xov tooj lub davhlau ya nyob twg 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宽度 */- Nws yuav tsum raug sau tseg tias CSS code xaj yog typeetting CSS los ntawm loj mus rau me me (txiav txim siab tias qhov loj ntawm qhov browser dav, qhov siab dua pem hauv ntej).
- Qhov no yog vim muaj kev sib raug zoo, @media qhov kev txiav txim siab ntawm CSS debugging yuav ua rau kev txiav txim tsis ua tiav.
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>Nco tseg: device-aspect-ratio
- ntaus ntawv-saib-tus piv tuaj yeem siv los ua kom haum cov khoom siv nrog cov kev ntsuas tshwj xeeb nam piv, uas kuj yog cov cuab yeej muaj txiaj ntsig.
- Piv txwv li, peb nplooj ntawv xav kom txhais cov qauv rau cov ntxaij vab tshaus ib txwm muaj qhov sib piv ntawm 4: 3.
- Tom qab ntawd rau 16: 9 thiab 16: 10 widescreen, txhais lwm tus qauv, xws li yoog raws thiab qhov dav dav:
- @media tsuas yog screen thiab (device-aspect-ratio: 4/3)
4. Tau tshaj browsers loj HTML+CSS+JS qhov chaws
<!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>Cov saum toj no yog lub xov tooj ntawm tes adaptive CSS, uas qhia txawv @media screen teb cov ncauj lus kom ntxaws raws li cov ntxaij vab tshaus sib txawv.
Cia siab Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Shared "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", uas yog pab tau rau koj.
Zoo siab txais tos los qhia qhov txuas ntawm kab lus no:https://www.chenweiliang.com/cwl-2074.html
Zoo siab txais tos rau Telegram channel ntawm Chen Weiliang blog kom tau txais qhov hloov tshiab tshiab!
📚 Daim ntawv qhia no muaj nuj nqis loj, 🌟Qhov no yog lub sijhawm tsis tshua muaj, tsis txhob nco nws! ⏰⌛💨
Share thiab like yog tias koj nyiam!
Koj qhov kev sib koom thiab kev nyiam yog peb qhov kev txhawb nqa tas mus li!