Artikkelihakemisto
Kuinka mobiiliresponsiivinen CSS näyttää erilaisia @media-näytön responsiivisia asetteluja eri resoluutioiden mukaan?
Seuraavassa artikkelissa esitellään, kuinka CSS:n avulla voidaan määrittää eri resoluutioita ja näyttää eri leveysasetteluja mukautuvan leveyden saavuttamiseksi.
Avun tarpeessa olevat ystävät voivat viitata siihen, toivottavasti siitä on apua kaikille.
Ero @median ja @median silkkitulostusverkkosivujen välillä
- Jos css:ää on käytettävä tulostuslaitteessa, käytä @mediaa, muussa tapauksessa @media-näyttöä.
- Tämä ei kuitenkaan välttämättä pidä paikkaansa. Itse asiassa, jos korvaat sanan "screen" sanalla "print" ja kirjoitat sen @media printiksi, CSS:ää voidaan käyttää tulostuslaitteessa.
- Huomaa kuitenkin, että @media printin ilmoittama css on voimassa vain tulostuslaitteissa.
1. DIVCSS-pienen tapauksen kuvaus
Määritimme ensin DIV-laatikon CSS:n nimeltä ".abc", asetimme sen korkeudeksi 300 pikseliä ja asetimme CSS-reunuksen mustaksi.
- ja asetukset
margin:0 autoAsettelu on keskitetty, ja nämä kaksi tyyliä on asetettu valmiiksi katsomisen helpottamiseksi.
Vedämme selainta manuaalisesti näyttämään leveyden ja tarkkailemme sitten, kuinka laatikon leveys muuttuu:
- Kun selaimen leveys on säädetty enintään 500 kuvapisteen leveyteen, ruudun leveyttä vastaava 100 kuvapistettä näytetään.
- Kun selaimen leveys on säädetty pienemmäksi kuin 901 pikseliä, näytössä näkyy ".abc", joka vastaa ruudun leveyttä, joka näyttää 200 kuvapistettä.
- Kun selaimen leveys on säädetty suuremmiksi kuin 1201px, laatikkoobjektin leveys näyttää 1200px;
- Kun se on alle 1200 900 pikseliä, näytön leveys on XNUMX pikseliä.
2, CSS-matkapuhelimen matkapuhelinpäätteen mukautuva koodi
.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宽度 */- On huomattava, että CSS-koodijärjestys ladoi CSS:n suuresta pieneen (päätellen, että mitä suurempi selaimen leveys, sitä korkeampi etuosa).
- Tämä johtuu loogisesta suhteesta, @median CSS-virheenkorjausarvio epäonnistuu.
3. HTML-koodi
<!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>Huomautus: laite-kuvasuhde
- laite-kuvasuhde voidaan käyttää sovittamaan laitteisiin, joilla on tietyt näytön kuvasuhteet, mikä on myös hyödyllinen ominaisuus.
- Sivumme haluaa esimerkiksi määrittää tyylin normaaleille näytöille, joiden kuvasuhde on 4:3.
- Määritä sitten 16:9- ja 16:10-laajakuvasuhteille toinen tyyli, kuten mukautuva leveys ja kiinteä leveys:
- @media vain näyttö ja (laitteen kuvasuhde:4/3)
4. Yhteensopiva suurten selainten HTML+CSS+JS-lähdekoodin kanssa
<!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>Yllä oleva on matkapuhelimen mukautuva CSS, joka näyttää erilaista @media-näytön responsiivista yksityiskohtaista sisältöä eri näyttöjen mukaan.
Hope Chen Weiliang -blogi ( https://www.chenweiliang.com/ ) Jaettu "Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness", josta on sinulle hyötyä.
Tervetuloa jakamaan tämän artikkelin linkki:https://www.chenweiliang.com/cwl-2074.html
Tervetuloa Chen Weiliangin blogin Telegram-kanavalle saadaksesi viimeisimmät päivitykset!
📚 Tämä opas sisältää valtavasti arvoa, 🌟Tämä on harvinainen tilaisuus, älä missaa sitä! ⏰⌛💨
Jaa ja tykkää jos tykkäät!
Jakamasi ja tykkäyksesi ovat jatkuva motivaatiomme!