Artikelkatalog
Hur visar mobil responsiv CSS olika @media-skärmresponsiva layouter enligt olika upplösningar?
Följande artikel kommer att introducera hur man använder CSS för att bestämma olika upplösningar och visa olika breddlayouter för att uppnå adaptiv bredd.
Vänner i nöd kan hänvisa till det, jag hoppas att det kommer att vara till hjälp för alla.
Skillnad mellan @media och @media screentryck webbsidor
- Om css behöver användas i en utskriftsenhet, använd @media, annars använder du @media screen.
- Detta är dock inte nödvändigtvis sant. Faktum är att om du ersätter "screen" med "print" och skriver det som @media print, så kan CSS användas på utskriftsenheten;
- Men observera att den css som deklareras av @media print endast är giltig på utskriftsenheter.
1. DIVCSS liten fallbeskrivning
Vi satte först en DIV-box CSS med namnet ".abc", satte dess höjd till 300px och satte CSS-kanten till svart;
- och inställningar
margin:0 autoLayouten är centrerad och dessa två stilar är förinställda för enkel visning.
Vi drar webbläsaren manuellt för att visa bredden och observerar sedan hur rutans bredd ändras:
- När webbläsarens bredd justeras till en bredd på högst 500px, visas 100px motsvarande bredden på rutan;
- När webbläsarens bredd justeras till att vara mindre än 901px, visas ".abc" motsvarande bredden på rutan, som visar 200px;
- När webbläsarens bredd justeras till att vara större än 1201px, visar boxobjektets bredd 1200px;
- När den är mindre än 1200px är skärmbredden 900px.
2, CSS mobiltelefon mobil terminal adaptiv kod
.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宽度 */- Det bör noteras att CSS-kodordningen sätter CSS från stor till liten (att döma att ju större webbläsarens bredd, desto högre front).
- Detta beror på det logiska förhållandet, @medias bedömning av CSS-felsökning kommer att leda till att bedömningen misslyckas.
3. HTML-kod
<!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>Obs: enhet-aspekt-förhållande
- device-aspect-ratio kan användas för att passa enheter med specifika skärmbildförhållande, vilket också är en användbar egenskap.
- Till exempel vill vår sida definiera en stil för normala skärmar med ett bildförhållande på 4:3.
- Sedan för 16:9 och 16:10 widescreen, definiera en annan stil, som adaptiv bredd och fast bredd:
- @bara media skärm och (device-aspect-ratio:4/3)
4. Kompatibel med större webbläsare HTML+CSS+JS källkod
<!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>Ovanstående är den adaptiva CSS för mobilterminalen, som visar olika @media-skärmresponsivt detaljerat innehåll enligt olika skärmar.
Hope Chen Weiliang blogg ( https://www.chenweiliang.com/ ) delade "Mobil Adaptive CSS Different Screens Display Different @media Screen Responsive", vilket är användbart för dig.
Välkommen att dela länken till denna artikel:https://www.chenweiliang.com/cwl-2074.html
Välkommen till Telegram-kanalen på Chen Weiliangs blogg för att få de senaste uppdateringarna!
📚 Den här guiden innehåller ett enormt värde, 🌟Detta är ett sällsynt tillfälle, missa inte det! ⏰⌛💨
Dela och gilla om du vill!
Dina delning och likes är vår ständiga motivation!