Cikkkönyvtár
Hogyan jelenít meg a mobilreszponzív CSS különböző @media képernyőre reagáló elrendezéseket a különböző felbontásoknak megfelelően?
A következő cikk bemutatja, hogyan használhatja a CSS-t a különböző felbontások meghatározására és a különböző szélességű elrendezések megjelenítésére az adaptív szélesség elérése érdekében.
A rászoruló barátok hivatkozhatnak rá, remélem mindenkinek hasznos lesz.
A @media és a @media szitanyomtató weboldalak közötti különbség
- Ha a css-t nyomtatóeszközben kell használni, használja a @media, ellenkező esetben a @media képernyőt.
- Ez azonban nem feltétlenül igaz, sőt, ha a "screen" kifejezést "print"-re cseréljük, és @media printként írjuk, akkor a CSS használható a nyomtatóeszközön;
- De vegye figyelembe, hogy a @media print által deklarált css csak nyomtatóeszközökön érvényes.
1. DIVCSS kis esetleírás
Először beállítottunk egy „.abc” nevű DIV doboz CSS-t, a magasságát 300 képpontra, a CSS szegélyt pedig feketére állítottuk;
- és beállításokat
margin:0 autoAz elrendezés középre van állítva, és ez a két stílus előre be van állítva a könnyebb megtekintés érdekében.
Kézzel húzzuk a böngészőt a szélesség megjelenítéséhez, majd megfigyeljük, hogyan változik a doboz szélessége:
- Ha a böngésző szélessége legfeljebb 500 képpont szélességre van állítva, a doboz szélességének megfelelő 100 képpont jelenik meg;
- Ha a böngésző szélességét 901 képpontnál kisebbre állítja, az „.abc” jelenik meg a 200 képpontot mutató mező szélességének megfelelően;
- Ha a böngésző szélességét 1201 képpontnál nagyobbra állítja, a dobozobjektum szélessége 1200 képpont lesz;
- Ha kisebb, mint 1200 képpont, a kijelző szélessége 900 képpont.
2, CSS mobiltelefon mobil terminál adaptív kódja
.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宽度 */- Meg kell jegyezni, hogy a CSS-kódsorrend a CSS-t nagyról kicsire szedi (úgy ítélve meg, hogy minél nagyobb a böngésző szélessége, annál magasabb az előlap).
- Ennek oka a logikai kapcsolat, a @media CSS-hibakeresésre vonatkozó ítélete az ítélet kudarcát okozza.
3. HTML kód
<!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>Megjegyzés: eszköz-képarány
- A device-aspect-ratio segítségével meghatározott képernyő-méretarányú eszközöket illeszthetünk, ami szintén hasznos tulajdonság.
- Oldalunk például 4:3-as képarányú normál képernyőkhöz szeretne stílust definiálni.
- Ezután a 16:9 és 16:10 szélesvásznú képarányhoz adjon meg egy másik stílust, például az adaptív szélességet és a rögzített szélességet:
- @media csak képernyő és (eszköz-képarány:4/3)
4. Kompatibilis a főbb böngészők HTML+CSS+JS forráskódjával
<!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>A fenti a mobiltelefonhoz adaptív CSS, amely különböző @media képernyőre reagáló részletes tartalmakat jelenít meg a különböző képernyők szerint.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) megosztotta „Mobile Adaptive CSS Different Screens Display Different @media Screen Responsive”, ami hasznos az Ön számára.
Üdvözöljük a cikk linkjének megosztásában:https://www.chenweiliang.com/cwl-2074.html
Üdvözöljük Chen Weiliang blogjának Telegram csatornáján, hogy értesüljön a legfrissebb hírekről!
📚 Ez az útmutató hatalmas értéket tartalmaz, 🌟 Ritka lehetőség ez, ne hagyd ki! ⏰⌛💨
Oszd meg és lájkold, ha tetszik!
Az Ön megosztása és lájkja folyamatos motivációnk!