Adresár článkov
Ako mobilný responzívny CSS zobrazuje rôzne rozloženia responzívne rozloženia @media obrazovky podľa rôznych rozlíšení?
Nasledujúci článok predstaví, ako pomocou CSS určiť rôzne rozlíšenia a zobraziť rôzne šírkové rozloženia na dosiahnutie adaptívnej šírky.
Priatelia v núdzi sa na to môžu obrátiť, dúfam, že to bude užitočné pre každého.
Rozdiel medzi @media a @media sieťotlačovými webovými stránkami
- Ak je potrebné použiť css v tlačovom zariadení, použite @media, inak použite @media screen.
- Nie je to však nevyhnutne pravda. V skutočnosti, ak nahradíte „screen“ slovom „print“ a napíšete to ako @media print, potom možno CSS použiť na tlačovom zariadení;
- Upozorňujeme však, že css deklarovaný @media print je platný iba na tlačových zariadeniach.
1. Popis malého prípadu DIVCSS
Najprv sme nastavili CSS boxu DIV s názvom „.abc“, nastavili sme jeho výšku na 300px a okraj CSS nastavili na čiernu;
- a nastavenia
margin:0 autoRozloženie je vycentrované a tieto dva štýly sú prednastavené na jednoduché prezeranie.
Ručne potiahneme prehliadač, aby sme zobrazili šírku, a potom sledujeme, ako sa mení šírka poľa:
- Keď je šírka prehliadača upravená na šírku nie väčšiu ako 500 pixelov, zobrazí sa 100 pixelov zodpovedajúcich šírke poľa;
- Keď je šírka prehliadača upravená na menej ako 901 pixelov, zobrazí sa „.abc“ zodpovedajúce šírke poľa, ktoré zobrazuje 200 pixelov;
- Keď je šírka prehliadača nastavená tak, aby bola väčšia ako 1201px, šírka objektu boxu zobrazí 1200px;
- Keď je menšia ako 1200 pixelov, šírka displeja je 900 pixelov.
2, CSS mobilný telefón adaptívny kód mobilného terminálu
.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宽度 */- Je potrebné poznamenať, že poradie kódu CSS je sádzanie CSS od veľkých po malé (súdiac, že čím väčšia je šírka prehliadača, tým vyššia je predná strana).
- Je to kvôli logickému vzťahu, úsudok @media o ladení CSS spôsobí zlyhanie úsudku.
3. HTML kód
<!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>Poznámka: pomer strán zariadenia
- device-aspect-ratio možno použiť na prispôsobenie zariadeniam so špecifickými pomermi strán obrazovky, čo je tiež užitočná vlastnosť.
- Napríklad naša stránka chce definovať štýl pre bežné obrazovky s pomerom strán 4:3.
- Potom pre širokouhlý formát 16:9 a 16:10 definujte iný štýl, ako je adaptívna šírka a pevná šírka:
- @media only obrazovka a (pomer strán zariadenia: 4/3)
4. Kompatibilné s hlavnými prehliadačmi HTML+CSS+JS zdrojový kód
<!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>Vyššie uvedené je adaptívny CSS pre mobilné telefóny, ktorý zobrazuje rôzny podrobný obsah citlivý na @media obrazovku podľa rôznych obrazoviek.
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) Zdieľané „Mobilné adaptívne CSS rôzne obrazovky zobrazujú rôznu odozvu obrazovky @media“, čo je pre vás užitočné.
Vitajte pri zdieľaní odkazu na tento článok:https://www.chenweiliang.com/cwl-2074.html
Vitajte na telegramovom kanáli blogu Chen Weiliang, kde získate najnovšie aktualizácie!
📚 Táto príručka obsahuje obrovskú hodnotu, 🌟Toto je vzácna príležitosť, nenechajte si ju ujsť! ⏰⌛💨
Ak sa vám páči, zdieľajte a lajkujte!
Vaše zdieľanie a lajky sú našou neustálou motiváciou!