Artikel Directory
Hvordan viser mobil responsiv CSS forskellige @media screen responsive layouts i henhold til forskellige opløsninger?
Den følgende artikel vil introducere, hvordan man bruger CSS til at bestemme forskellige opløsninger og vise forskellige breddelayouts for at opnå adaptiv bredde.
Venner i nød kan henvise til det, jeg håber det vil være nyttigt for alle.
Forskellen mellem @media og @media screen print af websider
- Hvis css'en skal bruges i en udskrivningsenhed, skal du bruge @media, ellers bruge @media screen.
- Dette er dog ikke nødvendigvis sandt. Faktisk, hvis du erstatter "skærm" med "print" og skriver det som @media print, så kan CSS'en bruges på printerenheden;
- Men bemærk, at den css, der er erklæret af @media print, kun er gyldig på udskrivningsenheder.
1. DIVCSS lille sagsbeskrivelse
Vi satte først en DIV-boks CSS ved navn ".abc", satte dens højde til 300px og satte CSS-kanten til sort;
- og indstillinger
margin:0 autoLayoutet er centreret, og disse to stilarter er forudindstillet til nem visning.
Vi trækker manuelt browseren for at vise bredden og observerer derefter, hvordan boksens bredde ændres:
- Når bredden af browseren er justeret til en bredde på ikke mere end 500px, vises 100px svarende til boksens bredde;
- Når bredden af browseren er justeret til at være mindre end 901px, vises ".abc" svarende til bredden af boksen, som viser 200px;
- Når browserbredden er justeret til at være større end 1201px, viser bredden af boksobjektet 1200px;
- Når den er mindre end 1200px, er skærmbredden 900px.
2, CSS mobiltelefon mobil terminal adaptiv kode
.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 skal bemærkes, at CSS-koderækkefølgen sætter CSS fra stor til lille (bedømmer, at jo større browserbredde, jo højere front).
- Dette er på grund af det logiske forhold, @medias vurdering af CSS-fejlretning vil få bedømmelsen til at mislykkes.
3. HTML-kode
<!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>Bemærk: enhed-aspekt-forhold
- device-aspect-ratio kan bruges til at tilpasse enheder med specifikke skærmstørrelsesforhold, hvilket også er en nyttig egenskab.
- For eksempel ønsker vores side at definere en stil for normale skærme med et billedformat på 4:3.
- For 16:9 og 16:10 widescreen skal du definere en anden stil, såsom adaptiv bredde og fast bredde:
- @medie kun skærm og (enhed-aspect-ratio:4/3)
4. Kompatibel med større browsere HTML+CSS+JS kildekode
<!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>Ovenstående er den mobile terminal adaptive CSS, som viser forskelligt @media screen responsivt detaljeret indhold i henhold til forskellige skærme.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Delt "Mobil adaptiv CSS Forskellige skærme viser forskellige @media-skærmreaktionsevne", hvilket er nyttigt for dig.
Velkommen til at dele linket til denne artikel:https://www.chenweiliang.com/cwl-2074.html
Velkommen til Telegram-kanalen på Chen Weiliangs blog for at få de seneste opdateringer!
📚 Denne guide indeholder enorm værdi, 🌟Dette er en sjælden mulighed, gå ikke glip af det! ⏰⌛💨
Del og like hvis du har lyst!
Din deling og likes er vores kontinuerlige motivation!