Artikkelkatalog
Hvordan viser mobil responsiv CSS ulike @media-skjermresponsive layouter i henhold til ulike oppløsninger?
Den følgende artikkelen vil introdusere hvordan du bruker CSS til å bestemme forskjellige oppløsninger og vise forskjellige breddeoppsett for å oppnå adaptiv bredde.
Venner i nød kan henvise til det, jeg håper det vil være nyttig for alle.
Forskjellen mellom @media og @media silketrykk nettsider
- Hvis css-en må brukes i en utskriftsenhet, bruk @media, ellers bruk @media screen.
- Dette er imidlertid ikke nødvendigvis sant. Faktisk, hvis du erstatter "skjerm" med "print" og skriver det som @media print, så kan CSS brukes på utskriftsenheten;
- Men merk at css-en som er deklarert av @media print kun er gyldig på utskriftsenheter.
1. DIVCSS liten saksbeskrivelse
Vi satte først en DIV-boks CSS kalt ".abc", satte høyden til 300px, og satte CSS-kanten til svart;
- og innstillinger
margin:0 autoOppsettet er sentrert, og disse to stilene er forhåndsinnstilt for enkel visning.
Vi drar nettleseren manuelt for å vise bredden, og ser deretter hvordan bredden på boksen endres:
- Når bredden på nettleseren er justert til en bredde på ikke mer enn 500px, vises 100px tilsvarende bredden på boksen;
- Når bredden på nettleseren er justert til å være mindre enn 901px, vises ".abc" tilsvarende bredden på boksen, som viser 200px;
- Når nettleserbredden er justert til å være større enn 1201px, viser bredden på boksobjektet 1200px;
- Når den er mindre enn 1200px, er skjermbredden 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 bemerkes at CSS-koderekkefølgen setter CSS fra stor til liten (bedømmer at jo større nettleserbredde, desto høyere front).
- Dette er på grunn av det logiske forholdet, @medias vurdering av CSS-feilsøking vil føre til at dommen 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>Merk: enhet-aspekt-forhold
- device-aspect-ratio kan brukes til å tilpasse enheter med spesifikke skjermforhold, som også er en nyttig egenskap.
- For eksempel ønsker siden vår å definere en stil for vanlige skjermer med et sideforhold på 4:3.
- For 16:9 og 16:10 widescreen, definer en annen stil, for eksempel adaptiv bredde og fast bredde:
- @media only-skjerm og (device-aspect-ratio:4/3)
4. Kompatibel med store nettlesere 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>Ovennevnte er den adaptive CSS-en for mobilterminalen, som viser forskjellig @media-skjermresponsivt detaljert innhold i henhold til forskjellige skjermer.
Hope Chen Weiliang blogg ( https://www.chenweiliang.com/ ) Delt "Mobil adaptiv CSS forskjellige skjermer viser forskjellig @media-skjermrespons", som er nyttig for deg.
Velkommen til å dele lenken til denne artikkelen:https://www.chenweiliang.com/cwl-2074.html
Velkommen til Telegram-kanalen til Chen Weiliangs blogg for å få de siste oppdateringene!
📚 Denne guiden inneholder enorm verdi, 🌟Dette er en sjelden mulighet, ikke gå glipp av den! ⏰⌛💨
Del og lik om du vil!
Din deling og likes er vår kontinuerlige motivasjon!