Каталог артыкулаў
Як мабільны адаптыўны CSS адлюстроўвае розныя спагадныя макеты экрана @media у залежнасці ад розных раздзяленняў?
Наступны артыкул пазнаёміць з тым, як выкарыстоўваць CSS для вызначэння розных раздзяленняў і адлюстравання макетаў рознай шырыні для дасягнення адаптыўнай шырыні.
Сябры, якія маюць патрэбу, могуць звярнуцца да яго, я спадзяюся, што гэта будзе карысна для ўсіх.
Розніца паміж трафарэтнымі вэб-старонкамі @media і @media
- Калі css трэба выкарыстоўваць у прыладзе друку, выкарыстоўвайце @media, у адваротным выпадку выкарыстоўвайце @media screen.
- Аднак гэта неабавязкова дакладна. Фактычна, калі вы заменіце «screen» на «print» і напішаце гэта як @media print, то CSS можна выкарыстоўваць на прыладзе друку;
- Але звярніце ўвагу, што CSS, аб'яўлены @media print, сапраўдны толькі на прыладах друку.
1. Невялікае апісанне выпадку DIVCSS
Спачатку мы ўсталявалі CSS скрынкі DIV пад назвай ".abc", усталявалі яе вышыню ў 300 пікселяў і ўсталявалі рамку CSS чорнай;
- і налады
margin:0 autoМакет размешчаны па цэнтры, і гэтыя два стылі прадусталяваны для зручнага прагляду.
Мы ўручную перацягваем браўзер, каб адлюстраваць шырыню, а потым назіраем, як змяняецца шырыня поля:
- Калі шырыня браўзера наладжана на шырыню не больш за 500 пікселяў, 100 пікселяў адлюстроўваюцца ў адпаведнасці з шырынёй поля;
- Калі шырыня браўзера наладжана менш за 901 пікс, адлюстроўваецца ".abc" у адпаведнасці з шырынёй поля, якое адлюстроўвае 200 пікселяў;
- Калі шырыня браўзера наладжана больш за 1201 пікс, шырыня аб'екта скрынкі будзе 1200 пікселяў;
- Калі яно менш за 1200 пікселяў, шырыня дысплея складае 900 пікселяў.
2, адаптыўны код мабільнага тэлефона мабільнага тэрмінала 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宽度 */- Варта адзначыць, што парадак кода CSS набірае CSS ад вялікага да малога (мяркуючы, што чым большая шырыня браўзера, тым вышэй пярэдняя частка).
- Гэта адбываецца з-за лагічнай сувязі, меркаванне @media аб адладцы CSS прывядзе да адмовы.
3. Код 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>Заўвага: суадносіны бакоў прылады
- device-aspect-ratio можа быць выкарыстаны для адаптацыі прылад з пэўнымі суадносінамі бакоў экрана, што таксама з'яўляецца карыснай уласцівасцю.
- Напрыклад, наша старонка хоча вызначыць стыль для звычайных экранаў з суадносінамі бакоў 4:3.
- Затым для шырокафарматнага экрана 16:9 і 16:10 вызначце іншы стыль, напрыклад, адаптыўную шырыню і фіксаваную шырыню:
- Экран толькі @media і (суадносіны бакоў прылады: 4/3)
4. Сумяшчальны з асноўнымі браўзерамі зыходны код HTML+CSS+JS
<!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>Вышэй прыведзены адаптыўны CSS для мабільных тэлефонаў, які адлюстроўвае падрабязны змест розных экранаў @media у залежнасці ад розных экранаў.
Блог Hope Chen Weiliang ( https://www.chenweiliang.com/ ) Падзяліўся інфармацыяй "Розныя экраны, адаптыўныя да мабільных прылад CSS, якія адлюстроўваюць розную спагадлівасць экранаў @media", што вам карысна.
Запрашаем падзяліцца спасылкай на гэты артыкул:https://www.chenweiliang.com/cwl-2074.html
Сардэчна запрашаем на канал Telegram у блогу Чэнь Вэйляна, каб атрымліваць апошнія абнаўленні!
📚 Гэты дапаможнік мае вялікую каштоўнасць, 🌟Гэта рэдкая магчымасць, не прапусціце яе! ⏰⌛💨
Падзяліцеся і лайкайце, калі хочаце!
Ваш абмен і лайкі - наша пастаянная матывацыя!