Каталог статей
Як адаптивний 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 піксель, ширина об’єкта box відображає 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 only screen and (device-aspect-ratio: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/ ) Поділився «Mobile Adaptive CSS Different Screens Display Different @media Screen Responsiveness», що було корисним для вас.
Ласкаво просимо поділитися посиланням на цю статтю:https://www.chenweiliang.com/cwl-2074.html
Ласкаво просимо до каналу Telegram у блозі Чень Вейляна, щоб отримувати останні оновлення!
📚 Цей посібник має величезну цінність. 🌟Це рідкісна можливість, не пропустіть її! ⏰⌛💨
Поділіться та вподобайте, якщо вам подобається!
Ваші публікації та лайки є нашою постійною мотивацією!