Выбираем медиа-запросы: min-width CSS или max-width CSS
Мне часто задают вопросы вроде: «Стоит ли использовать медиа-запросы (media queries) min-width или max width CSS? Те, кто знаком с адаптивным дизайном, сочтут этот вопрос странным, так как знают, что все зависит от конкретного случая. Сегодня я рад поделиться с вами собственным мнением о том, что на самом деле означает «зависит от конкретного случая».
- Ориентир на настольные ПК и max-width
- max-width CSS вместо более подходящего решения
- Так что же лучше использовать?
Большая часть разработчиков до сих пор ориентируется только на пользователей ПК. Часто осознание ситуации приходит, когда становится ясно, сколько сил было потрачено впустую на компоненты для ПК, которые все реже востребованы из-за растущего числа мобильных пользователей.
Если дизайн разрабатывался в первую очередь под настольные ПК, значит весь CSS должен быть насыщен объемным кодом для других ключевых точек (breakpoints). Если определенная ширина, заданная для ПК, является точкой отсчета, и мы не станем изменять и переписывать наш CSS, то вполне логично будет поменять в базовых стилях значения ширины окна просмотра на те, которые мы собираемся применять к экранам меньшего размера.
Вот пример, которым я часто пользуюсь (предполагая, что .related принимает форму боковой панели):
.content {
width: 60%;
}
.related {
width: 40%;
}
@media screen and (max-width: 37.4em) {
.content,
.related {
width: 100%;
}
}Такой подход при использовании со множеством компонентов может существенно увеличить объем CSS завершенного проекта. Но так как блочные элементы по умолчанию занимают 100% ширины родительского элемента, то разумнее было бы прописать все следующим образом:
@media screen and (min-width: 37.5em) { .content { width: 60%; } .related { width: 40%; } }
5em) {
.content {
width: 60%;
}
.related {
width: 40%;
}
}Здесь мы используем стандартное положение блочных элементов, и перекрываем их, когда это состояние требуется изменить. Чтобы лучше понять суть всего сказанного, нужно изучить рабочий код таких сайтов.
Есть несколько причин использования в min width CSS и max width CSS:
- Если вы получили дизайн только для настольной версии сайта. Если вы получили настольную версию дизайна и несколько дополнительных вариантов для мобильных устройств. В таких случаях можете использовать max-width, но только временно;
- Вы внедряете адаптивный дизайн в уже работающий сайт, и код его стилей нельзя изменять;
- Вы пытаетесь компенсировать отсутствие медиа-запросов, и пытаетесь реализовать это с помощью CSS вместо JavaScript.
Обращайте внимание на стандартный вариант отображения конкретного элемента. Если вам нужно переписывать стандартное состояние для меньших экранов, то используйте max-width.
Если элемент можно использовать на меньших экранах и при стандартном состоянии, применяйте min-width только в тех случаях, когда элемент должен отличаться от стандартного состояния. И конечно же, я рекомендую вам позволить контенту определять, что и как должно происходить.
Таблицы – отличный пример использования CSS div max width для изменения стандартного состояния элемента, чтобы он лучше отображался на маленьких экранах. Представьте таблицу, контента в которой слишком много, чтобы отображать его полностью на маленьких устройствах. В таком случае мы можем применить следующий код:
@media only screen and (max-width: 30em) {
.big-table tr,
.big-table td {
display: block;
}
} Этот код позволит нам преобразовать каждую строку (и ячейку) в блок. В результате таблица может стать длинной по вертикали, но зачастую это меньшее из зол. Я имею в виду длинные таблицы, которые приходится прокручивать по горизонтали. В таких ситуациях лучше всего оставить таблицы без изменений, за исключением кода для тех браузеров, которые понимают медиа-запросы, и случаев, когда ширина экрана не превышает определенного значения (30em в нашем случае).
Другие элементы, которые в стандартном состоянии отлично смотрятся на маленьких экранах, нужно изменять лишь по необходимости для экранов большего размера. В таких случаях и применяется min-width.
Вкратце: позвольте стандартному состоянию элементов помочь вам определить, какой медиа-запрос использовать.
Валентин Сейидовавтор-переводчик статьи «Choosing between min-width and max-width media queries»
html — Как установить @media (минимальная ширина) и (максимальная ширина) для Chrome и Firefox
Задавать вопрос
спросил
Изменено 4 года, 9 месяцев назад
Просмотрено 28 тысяч раз
3
Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.
Я хочу установить некоторые правила CSS для планшетных устройств, для этого я попытался установить эти правила для экрана между 769px и 991px. Когда я делаю:
@media (минимальная ширина: 769 пикселей) и (максимальная ширина: 991 пикселей) {
.img-круг {
ширина: 50%;
}
} Он работает с Chrome, но с Firefox нет, и когда я попытался добавить скобки:
@media ((минимальная ширина: 769 пикселей) и (максимальная ширина: 991 пикселей)) {
.img-круг {
ширина: 50%;
}
} Работает с forefox, но не с chrome! Если у вас есть идея 🙂 я не могу понять это
С уважением
- html
- css
- google-chrome
- firefox
- медиа-запросы
Работает во всех браузерах
.мм {
фон: голубой;
ширина: 200 пикселей;
высота строки: 200 пикселей;
вес шрифта: 700;
выравнивание текста: по центру;
размер шрифта: 50px;
}
Только экран @media и (минимальная ширина: 768 пикселей) и (максимальная ширина: 990 пикселей){
. мм{
фон:красный;
}
} 
мм{
фон:красный;
}
} <голова> Документ без названия <тело> <дел>12
Попробуйте изменить свой код на
@media only screen /* добавление только запроса */
и (минимальная ширина: 769px)
и (максимальная ширина: 991px) {
.img-круг {
ширина: 50%;
}
}
и попробуйте создать ответвление вместе с нами в этом репозитории.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почтаТребуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — Как использовать минимальную ширину и максимальную ширину в запросах мультимедиа CSS с экранами мобильных устройств с высокой плотностью
Задавать вопрос
спросил
Изменено 1 год, 11 месяцев назад
Просмотрено 4к раз
0
Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.
Делаю первые шаги в мире адаптивного дизайна.
Я обнаружил, что наиболее рекомендуемый способ — использовать min-width и max-width , чтобы узнать размер области отображения, например:
@media (max-width: 1200px) { ... } /* для настольных компьютеров */
@media (max-width: 991px) { ... } /* для ноутбуков */
@media (минимальная ширина: 768 пикселей) и (максимальная ширина: 990px) { ... } /* для больших планшетов */
@media (max-width: 768px) { ... } /* для небольших планшетов */
@media (max-width: 500px) { ... } /* для мобильных телефонов */
Проблема в том, что новые телефоны имеют экраны высокой плотности. Мой телефон имеет ширину 980px. Поэтому он загружает неправильный CSS, предназначенный для больших экранов.
Я попробовал max-device-width . Он учитывает логические пиксели, и ширина моего телефона составляет 393 из них. Это сработало. Но max-device-width устарел, поэтому я не хочу его использовать.
Я также нашел несколько примеров с минимальным разрешением и с максимальным разрешением .
Также можно использовать JavaScript, чтобы определить, является ли браузер мобильным, но это не кажется правильным подходом.
Вот я и запутался. Пожалуйста, дайте мне подсказки, что и как я должен использовать, чтобы определить, работает ли сайт на мобильном устройстве, и как загрузить для него правильный CSS. Как это сделать правильно и надежно?
Заранее спасибо.
- HTML
- CSS
- адаптивный дизайн
1
во-первых, то, как вы его используете, не сработает. Например:
@media (максимальная ширина: 1200 пикселей) { ... } /* для настольных компьютеров */
@media (max-width: 991px) { ... } /* для ноутбуков */ , если ширина экрана 900px, то будут применяться оба медиа-запроса. Потому что 900px ниже 1200px и ниже 991px.
Для этого конкретного случая ваши медиа-запросы должны быть следующими:
/* для настольных компьютеров */
@медиа только экран
и (минимальная ширина: 1367 пикселей) {
...
}
/* для ноутбуков */
@медиа только экран
и (минимальная ширина: 991px)
и (максимальная ширина: 1366 пикселей) {
...
}
/* для больших планшетов */
@медиа только экран
и (минимальная ширина: 769px)
и (максимальная ширина: 990 пикселей) {
...
}
/* для небольших планшетов */
@медиа только экран
и (минимальная ширина: 481px)
и (максимальная ширина: 768 пикселей) {
...
}
/* для мобильных телефонов */
@медиа только экран
и (максимальная ширина: 480 пикселей) {
...
} , как вы заметили, он должен содержать минимальную и максимальную ширину, если только это не нижний или верхний конец (настольный компьютер и смартфоны), наименьший размер смартфона составляет 320 пикселей, кстати.
Также я изменил медиа-запросы только на экран, это просто хорошая практика, поскольку вы хотите обращаться только к экранам.
Размер экрана: Обратите внимание на разницу между аппаратными пикселями и пикселями области просмотра. на вашем телефоне может быть что-то выше 900 аппаратных пикселей, но только половина или четверть от этого — пиксели области просмотра. Аппаратные пиксели — это пиксели, которые устройство имеет физически, а пиксели окна просмотра — это пиксели, которые могут быть обработаны css. Причина в том, что пиксели ahdrware на самом деле не адресуются из-за резкости. кроме того, иначе это было бы почти нечитаемо.
Редактировать: Экранные панели дешевых ноутбуков имеют разрешение 1366 x 768 пикселей. поэтому ширина ноутбука также должна быть установлена на 1366 пикселей.
Существует разница между пикселями устройства и пикселями CSS. На многих экранах они обрабатываются одинаково, но на экранах с высоким разрешением может быть несколько пикселей устройства на пиксель CSS. См. эту страницу на MDN для получения дополнительной информации.
Чтобы управлять шириной в пикселях CSS, используйте метатег viewport в своем HTML.
Этот тег обычно интерпретируется только на мобильных устройствах, поэтому он не должен влиять на ваш сайт в настольных браузерах. Он указывает минимальная ширина , на которой будет отображаться ваш сайт.
Например, чтобы ваш сайт отображался с минимальной шириной 500 пикселей на мобильных устройствах, используйте:
Для отображения сайта по ширине браузера используйте:
В дополнение к статье MDN следующая статья может быть полезна для настройки ширины экрана для планшетов.
2
Для адаптивного дизайна рекомендуется использовать подход Mobile First. Вы начинаете со стиля мобильной версии и меняете его по мере роста области просмотра.
Со следующими медиа-запросами у вас возникают другие проблемы:
@media (max-width: 1200px) { .