Director articol
Cum afișează CSS-ul mobil receptiv diferite machete de răspuns pentru ecranul @media în funcție de diferite rezoluții?
Următorul articol va prezenta modul de utilizare a CSS pentru a determina diferite rezoluții și pentru a afișa diferite aspecte de lățime pentru a obține lățimea adaptivă.
Prietenii care au nevoie se pot referi la el, sper că va fi de ajutor tuturor.
Diferența dintre paginile web de serigrafie @media și @media
- Dacă CSS-ul trebuie utilizat într-un dispozitiv de imprimare, utilizați @media, în caz contrar, utilizați @media screen.
- Totuși, acest lucru nu este neapărat adevărat. De fapt, dacă înlocuiți „screen” cu „print” și îl scrieți ca @media print, atunci CSS-ul poate fi folosit pe dispozitivul de imprimare;
- Dar rețineți că css-ul declarat de @media print este valabil doar pe dispozitivele de imprimare.
1. Descrierea cazului mic DIVCSS
Mai întâi setăm o casetă DIV CSS numită „.abc”, setăm înălțimea acesteia la 300px și setăm chenarul CSS la negru;
- și setări
margin:0 autoAspectul este centrat, iar aceste două stiluri sunt prestabilite pentru o vizualizare ușoară.
Tragem manual browserul pentru a afișa lățimea, apoi observăm cum se modifică lățimea casetei:
- Când lățimea browserului este ajustată la o lățime de cel mult 500px, se afișează 100px corespunzător lățimii casetei;
- Când lățimea browserului este ajustată pentru a fi mai mică de 901 px, „.abc” este afișat corespunzător lățimii casetei, care afișează 200 px;
- Când lățimea browserului este ajustată pentru a fi mai mare de 1201px, lățimea obiectului casetă afișează 1200px;
- Când este mai mică de 1200 px, lățimea afișajului este de 900 px.
2, codul adaptiv al terminalului mobil pentru telefonul mobil CSS
.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宽度 */- Trebuie remarcat faptul că ordinea codului CSS este tipărirea CSS de la mare la mic (judecând că cu cât lățimea browserului este mai mare, cu atât partea frontală este mai mare).
- Acest lucru se datorează relației logice, judecata @media cu privire la depanarea CSS va duce la eșecul judecății.
3. Cod HTML
<!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>Notă: raportul de aspect al dispozitivului
- device-aspect-ratio poate fi folosit pentru a se potrivi dispozitivelor cu rapoarte de aspect specifice ale ecranului, care este, de asemenea, o proprietate utilă.
- De exemplu, pagina noastră dorește să definească un stil pentru ecranele normale cu un raport de aspect de 4:3.
- Apoi, pentru ecran lat 16:9 și 16:10, definiți un alt stil, cum ar fi lățimea adaptivă și lățimea fixă:
- Ecran numai @media și (raport-aspect-dispozitiv: 4/3)
4. Compatibil cu principalele browsere HTML+CSS+JS cod sursă
<!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>Cele de mai sus este CSS-ul adaptiv pentru telefonul mobil, care afișează conținut detaliat care răspunde la ecranul @media, în funcție de diferite ecrane.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Partajat „Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness”, care vă este util.
Bine ați venit să distribuiți linkul acestui articol:https://www.chenweiliang.com/cwl-2074.html
Bun venit pe canalul Telegram al blogului lui Chen Weiliang pentru a primi cele mai recente actualizări!
📚 Acest ghid conține o valoare uriașă, 🌟Aceasta este o oportunitate rară, nu o ratați! ⏰⌛💨
Distribuie si da like daca iti place!
Partajarea și like-urile tale sunt motivația noastră continuă!