Straipsnių katalogas
Kaip mobiliesiems reaguojantis CSS rodo skirtingus @media ekrano reaguojančius išdėstymus pagal skirtingas skiriamąsias gebas?
Šiame straipsnyje bus pristatyta, kaip naudoti CSS norint nustatyti skirtingas skiriamąsias gebas ir rodyti skirtingų pločių išdėstymus, kad būtų pasiektas prisitaikantis plotis.
Draugai, kuriems reikia pagalbos, gali kreiptis į jį, tikiuosi, kad tai bus naudinga visiems.
Skirtumas tarp @media ir @media ekrano spausdinimo tinklalapių
- Jei spausdinimo įrenginyje reikia naudoti css, naudokite @media, kitu atveju naudokite @media screen.
- Tačiau tai nebūtinai yra tiesa. Tiesą sakant, jei pakeisite „screen“ į „print“ ir parašysite kaip @media print, tada CSS gali būti naudojamas spausdinimo įrenginyje;
- Tačiau atminkite, kad @media print deklaruotas css galioja tik spausdinimo įrenginiuose.
1. DIVCSS mažo atvejo aprašymas
Pirmiausia nustatėme DIV dėžutės CSS pavadinimu „.abc“, nustatėme jo aukštį iki 300 pikselių, o CSS kraštinę – juodą;
- ir nustatymai
margin:0 autoIšdėstymas yra centre, o šie du stiliai yra iš anksto nustatyti, kad būtų lengva peržiūrėti.
Rankiniu būdu tempiame naršyklę, kad būtų rodomas plotis, ir tada stebime, kaip keičiasi laukelio plotis:
- Nustačius naršyklės plotį iki ne didesnio kaip 500px, rodomas 100px, atitinkantis langelio plotį;
- Kai naršyklės plotis yra mažesnis nei 901 piks., rodomas „.abc“, atitinkantis laukelio plotį, kuriame rodoma 200 pikselių;
- Kai naršyklės plotis yra didesnis nei 1201 piks., laukelio objekto plotis rodomas 1200 pikselių;
- Kai jis mažesnis nei 1200 pikselių, ekrano plotis yra 900 pikselių.
2, CSS mobiliojo telefono mobiliojo terminalo adaptacinis kodas
.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宽度 */- Reikėtų pažymėti, kad CSS kodo tvarka yra CSS rinkimas nuo didelio iki mažo (sprendžiant, kad kuo didesnis naršyklės plotis, tuo didesnis priekis).
- Taip yra dėl loginio ryšio, dėl @media sprendimo dėl CSS derinimo sprendimas žlugs.
3. HTML kodas
<!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>Pastaba: įrenginio kraštinių santykis
- Įrenginio formato koeficientas gali būti naudojamas įrenginiams su konkrečiu ekrano formatu pritaikyti, o tai taip pat yra naudinga savybė.
- Pavyzdžiui, mūsų puslapis nori apibrėžti įprastų ekranų stilių, kurio kraštinių santykis yra 4:3.
- Tada 16:9 ir 16:10 plačiaekraniams nustatykite kitą stilių, pvz., prisitaikantį plotį ir fiksuotą plotį:
- @media tik ekranas ir (įrenginio formato santykis: 4/3)
4. Suderinamas su pagrindinių naršyklių HTML+CSS+JS šaltinio kodu
<!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>Aukščiau yra mobiliesiems telefonams pritaikytas CSS, kuris rodo skirtingą @media ekraną reaguojantį detalų turinį pagal skirtingus ekranus.
Hope Chen Weiliang tinklaraštis ( https://www.chenweiliang.com/ ) Bendrinamas „Mobiliesiems pritaikytam CSS skirtingiems ekranams rodomas skirtingas @media ekrano reagavimas“, kuris jums naudingas.
Kviečiame pasidalinti šio straipsnio nuoroda:https://www.chenweiliang.com/cwl-2074.html
Sveiki atvykę į Chen Weiliang tinklaraščio Telegram kanalą, kad gautumėte naujausius atnaujinimus!
📚 Šis vadovas turi didžiulę vertę, 🌟Tai reta galimybė, nepraleiskite jos! ⏰⌛💨
Dalinkitės ir like jei patiko!
Jūsų dalijimasis ir paspaudimai „Patinka“ yra mūsų nuolatinė motyvacija!