Каталог статей
Как адаптивный CSS для мобильных устройств отображает различные адаптивные макеты экрана @media в зависимости от разрешения?
В следующей статье будет рассказано, как использовать CSS для определения различных разрешений и отображения макетов разной ширины для достижения адаптивной ширины.
Нуждающиеся друзья могут сослаться на него, надеюсь, он будет полезен всем.
Разница между @media и @media трафаретной печатью веб-страниц
- Если css необходимо использовать на печатающем устройстве, используйте @media, в противном случае используйте @media screen.
- Однако это не обязательно верно.На самом деле, если вы замените «экран» на «печать» и напишите это как @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, в соответствии с разными экранами.
Блог Хоуп Чен Вейлян ( https://www.chenweiliang.com/ ) Общий раздел «Мобильный адаптивный CSS на разных экранах отображает различную отзывчивость экрана @media», который будет полезен для вас.
Добро пожаловать, чтобы поделиться ссылкой на эту статью:https://www.chenweiliang.com/cwl-2074.html
Добро пожаловать на Telegram-канал блога Chen Weiliang, чтобы быть в курсе последних обновлений!
📚 Это руководство содержит огромную ценность. 🌟Это редкая возможность, не упустите ее! ⏰⌛💨
Делитесь и ставьте лайк, если хотите!
Ваш обмен и лайки - наша постоянная мотивация!