Artikel Directory
Hoe geeft mobiel responsieve CSS verschillende responsieve lay-outs voor @media-schermen weer volgens verschillende resoluties?
In het volgende artikel wordt uitgelegd hoe u CSS kunt gebruiken om verschillende resoluties te bepalen en verschillende breedtelay-outs weer te geven om adaptieve breedte te bereiken.
Vrienden in nood kunnen ernaar verwijzen, ik hoop dat het voor iedereen nuttig zal zijn.
Het verschil tussen @media en @media zeefdruk webpagina's
- Als de css in een afdrukapparaat moet worden gebruikt, gebruik dan @media, of gebruik @media screen.
- Dit is echter niet per se waar.In feite, als u "screen" vervangt door "print" en het schrijft als @media print, dan kan de CSS worden gebruikt op het afdrukapparaat;
- Houd er echter rekening mee dat de door @media print gedeclareerde css alleen geldig is op afdrukapparaten.
1. DIVCSS kleine casebeschrijving
We stellen eerst een DIV-box CSS in met de naam ".abc", stellen de hoogte in op 300px en zetten de CSS-rand op zwart;
- en instellingen
margin:0 autoDe lay-out is gecentreerd en deze twee stijlen zijn vooraf ingesteld om ze gemakkelijk te kunnen bekijken.
We slepen de browser handmatig om de breedte weer te geven en kijken vervolgens hoe de breedte van het vak verandert:
- Wanneer de breedte van de browser wordt aangepast tot een breedte van niet meer dan 500px, wordt 100px weergegeven die overeenkomt met de breedte van het vak;
- Wanneer de breedte van de browser wordt aangepast om minder dan 901px te zijn, wordt ".abc" weergegeven die overeenkomt met de breedte van het vak, dat 200px weergeeft;
- Wanneer de browserbreedte wordt aangepast om groter te zijn dan 1201px, wordt de breedte van het boxobject 1200px weergegeven;
- Als het minder dan 1200 px is, is de weergavebreedte 900 px.
2, CSS mobiele telefoon mobiele terminal adaptieve 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宽度 */- Opgemerkt moet worden dat de volgorde van de CSS-code CSS van groot naar klein zet (ervan uitgaande dat hoe groter de browserbreedte, hoe hoger de voorkant).
- Dit komt door de logische relatie, @media's oordeel over CSS debugging zal ervoor zorgen dat het oordeel mislukt.
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>Opmerking: apparaat-beeldverhouding
- device-aspect-ratio kan worden gebruikt om apparaten te passen met specifieke scherm-aspectverhoudingen, wat ook een nuttige eigenschap is.
- Onze pagina wil bijvoorbeeld een stijl definiëren voor normale schermen met een beeldverhouding van 4:3.
- Definieer vervolgens voor 16:9 en 16:10 breedbeeld een andere stijl, zoals adaptieve breedte en vaste breedte:
- @media only-scherm en (device-aspect-ratio:4/3)
4. Compatibel met de belangrijkste browsers HTML+CSS+JS-broncode
<!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>Het bovenstaande is de adaptieve CSS van de mobiele terminal, die verschillende @media-schermresponsieve gedetailleerde inhoud weergeeft op basis van verschillende schermen.
Hoop Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Gedeeld "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", wat nuttig voor u is.
Welkom om de link van dit artikel te delen:https://www.chenweiliang.com/cwl-2074.html
Welkom op het Telegram-kanaal van Chen Weiliang's blog voor de laatste updates!
📚 Deze gids bevat enorme waarde, 🌟Dit is een zeldzame kans, mis hem niet! ⏰⌛💨
Deel en like als je wilt!
Uw delen en likes zijn onze voortdurende motivatie!