Нийтлэлийн лавлах
Хөдөлгөөнт мэдрэгчтэй CSS нь янз бүрийн нягтралын дагуу @media дэлгэцийн өөр өөр тохиргоог хэрхэн харуулдаг вэ?
Дараах нийтлэлд дасан зохицох өргөнийг олж авахын тулд янз бүрийн нягтралыг тодорхойлох, өөр өөр өргөнтэй байршлыг харуулахын тулд CSS-ийг хэрхэн ашиглах талаар танилцуулах болно.
Хэрэгтэй найзууд лавлаж болно, энэ нь хүн бүрт хэрэг болно гэж найдаж байна.
@media болон @media дэлгэцийн вэб хуудасны ялгаа
- Хэрэв css-г хэвлэх төхөөрөмжид ашиглах шаардлагатай бол @media, үгүй бол @media screen-г ашиглана уу.
- Гэсэн хэдий ч энэ нь заавал үнэн биш юм.Үнэндээ хэрэв та "дэлгэц"-ийг "print"-ээр сольж @media print гэж бичвэл CSS-ийг хэвлэх төхөөрөмж дээр ашиглаж болно;
- @media print-ийн зарласан css нь зөвхөн хэвлэх төхөөрөмж дээр хүчинтэй гэдгийг анхаарна уу.
1. DIVCSS жижиг хэргийн тайлбар
Бид эхлээд ".abc" нэртэй DIV хайрцагны CSS-г тохируулж, өндрийг нь 300px болгож, CSS хүрээг хар болгож тохируулсан;
- болон тохиргоо
margin:0 autoЗохион байгуулалт нь төвлөрсөн бөгөөд эдгээр хоёр хэв маягийг харахад хялбар байхаар урьдчилан тохируулсан болно.
Бид өргөнийг харуулахын тулд хөтчийг гараар чирж, дараа нь хайрцагны өргөн хэрхэн өөрчлөгдөж байгааг ажиглана.
- Хөтөчийн өргөнийг 500px-ээс ихгүй өргөнтэй болгож тохируулах үед хайрцагны өргөнтэй тохирох 100px гарч ирнэ;
- Хөтөчийн өргөнийг 901px-ээс бага байхаар тохируулах үед хайрцагны өргөнтэй тохирох ".abc" гарч ирэх ба 200px;
- Хөтөчийн өргөнийг 1201px-ээс их байхаар тохируулах үед хайрцагны объектын өргөн нь 1200px харагдана;
- 1200px-ээс бага бол дэлгэцийн өргөн 900px болно.
2, 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宽度 */- CSS кодын дараалал нь CSS-ийг томоос жижиг рүү шивдэг гэдгийг тэмдэглэх нь зүйтэй (хөтөчийн өргөн том байх тусам урд тал нь өндөр байх болно).
- Энэ нь логик харилцаанаас болж @media-ийн CSS дибаг хийх шийдвэр амжилтгүй болоход хүргэнэ.
3. 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>Тайлбар: төхөөрөмжийн харьцаа
- Төхөөрөмжийн харьцаа нь тодорхой дэлгэцийн харьцаатай төхөөрөмжүүдийг тохируулахад ашиглагдах боломжтой бөгөөд энэ нь бас ашигтай шинж чанар юм.
- Жишээлбэл, манай хуудас 4:3 харьцаатай ердийн дэлгэцийн хэв маягийг тодорхойлохыг хүсч байна.
- Дараа нь 16:9 ба 16:10 өргөн дэлгэцийн хувьд дасан зохицох өргөн, тогтмол өргөн гэх мэт өөр хэв маягийг тодорхойлно уу:
- Зөвхөн @media дэлгэц ба (төхөөрөмжийн харьцаа: 4/3)
4. 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>Дээрх нь гар утасны терминалын дасан зохицох CSS бөгөөд өөр өөр дэлгэцийн дагуу @media дэлгэцийн хариу үйлдэл үзүүлэх дэлгэрэнгүй контентыг харуулдаг.
Hope Chen Weiliang блог ( https://www.chenweiliang.com/ ) "Хөдөлгөөнт дасан зохицох CSS өөр өөр дэлгэцүүд @media дэлгэцийн хариу үйлдэл"-ийг хуваалцсан нь танд тустай.
Энэ нийтлэлийн холбоосыг хуваалцахад тавтай морилно уу:https://www.chenweiliang.com/cwl-2074.html
Чен Вэйляны блогын Telegram сувагт тавтай морил, хамгийн сүүлийн үеийн мэдээг аваарай!
📚 Энэхүү гарын авлага нь асар их үнэ цэнийг агуулсан, 🌟Энэ бол ховор боломж, бүү алдаарай! ⏰⌛💨
Хэрэв танд таалагдвал лайк дарж, хуваалцаарай!
Таны хуваалцах, дуртай зүйл бол бидний байнгын урам зориг юм!