Общие контрольные точки для медиазапросов на адаптивном сайте

Question

Итак, я работаю над своим первым адаптивным веб-сайтом, который широко использует медиа-запросы. Мне было интересно, есть ли некоторые общие ширины страницы, для которых я должен оптимизировать.

У меня, вероятно, будет максимальная ширина (не будет полной текучести). Думаю, у меня будет 3-5 наборов ширины с забавными небольшими переходами CSS3 между ними (аналогично тому, как CSS Tricks работает) .

В настоящее время я использую несколько произвольных чисел:

@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}

Кроме того, я думаю, что я читал, что некоторые мобильные устройства работают не так, как ожидалось (с @media). Где это входит в игру и как я должен иметь дело с этими ситуациями?

Answer 1

• Это довольно полезное руководство для экранов мобильных устройств.
• Отличное руководство по статистике разрешений экрана
• Данные Google Analytics о разрешениях также могут быть полезны, если у вас есть к ним доступ.

Кроме того, я бы определенно рекомендовал использовать device-width для ваших мобильных размеров, если только вы не хотите, чтобы пользователи видели ваши мобильные стили, когда они изменяют размер окна своего браузера на немобильном устройстве. width - это ширина области просмотра, а device-width - текущее разрешение устройства.

Кроме того, я думаю, что я читал, что некоторые мобильные устройства не работают должным образом (с @media).

Вы правы. Многие устройства не дадут вам ожидаемых значений width или device-width, особенно при переключении между альбомным и портретным режимом (они часто дают ширину альбомного изображения в портретном режиме). Устройство автоматического масштабирования может также бросить гаечный ключ в вещи. Использование метатега viewport может помочь решить многие из этих проблем. (Подробнее об этом здесь)

Answer 2

При выборе точек останова для ваших медиа-запросов учитывайте следующие реалии:

• Существуют сотни экранов разных размеров на тысячах различных устройств.
• Будущее принесет новый экранразмеры.
• Apple, Samsung, Microsoft, LG, Nokia и любые другие производители устройств могут в любое время изменить размер экрана своих популярных моделей.

С таким большим количеством области просмотравозможности сопоставления точек останова с конкретными устройствами не являются эффективной стратегией.Просто следить за тем, что популярно, что нового и что изменилось, будет бесконечной задачей.

Лучшим подходом может быть установка точек останова на основе содержимого и макета.

При таком подходе ваш сайт использует свои естественные контрольные точки для адаптации к всем размерам области просмотра, а не искусственные контрольные точки, ориентированные на общеупотребительные размеры экрана.

Этот метод настолько прост и легок, что можетТрудно поверить:

1. Запустите свой веб-сайт на настольном компьютере или ноутбуке.
2. Когда вы сузите окно браузера, обратите внимание на реакцию веб-сайта.
3. Когда выдостичь точки, в которой ваш макет уже не идеален, это ваша первая точка останова.
4. Настройте свой сайт под этот размер экрана (который может не иметь отношения к любому устройству).
5. Продолжайте сужать браузерокно.
6. Когда вы сталкиваетесь с следующей проблемой макета, это ваша вторая точка останова.
7. ... и т. д. и т. п.

ИзКонечно, если вы разрабатываете для мобильных устройств сначала, процесс идет в обратном направлении: начните с узкого экрана и продолжайте свой путь.

С естественными точками останова вам больше не нужно фокусироваться на гигантской вселенной видового экранаразмеры, потому что ваш сайт будет адаптироваться к любому устройству, как сейчас, так и в будущем.

---

Согласно одному разработчику , этот подход приводит точки останова к исходному замыслу:

Я не уверен, как мы вообще когда-либо придумывали фразу «точки останова для конкретного устройства» ... Как я понял, термин «точка останова» всегда был ссылкой на то, гдеконтент или макет будут «ломаться» (то есть будут выглядеть некорректно), и поэтому вам нужно будет применить медиа-запрос в этой точке.Но я предполагаю, что это просто семантика, я просто всегда думал, что было бы разумно ссылаться на точки останова в контексте содержимого или макета.

~ Louis Lazaris, ImpressiveWebs

_{источник: https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450}

---

Дополнительная информация (внешние сайты):

• Почему выНе нужны определенные для устройства точки останова
• Установка точек останова в адаптивном дизайне
• Разработчики Google: как выбрать точки останова
• Подход Златовласки к адаптивному дизайну
• Размеры области просмотра (список сотен устройств и размеров области просмотра)
• Запросы мультимедиадля стандартных устройств (список медиазапросов для популярных устройств)

Answer 3

Это то, что я использую ...

@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}

В зависимости от ситуации, есть и другие виды (минимальная ширина без максимальной ширины или максимальная ширина без минимальной ширины), но это моя базовая настройка.

Лично я никогда не понимал странной ширины, которую используют многие люди. Например, 320 и выше имеет пять приращений медиазапроса CSS3: 480, 600, 768, 992 и 1382px.

Это не имеет никакого смысла для меня. Логические разрывы с интервалом в 320 пикселей (320, 640, 960, 1280, 1600, 1920). Обратите внимание, что эти перерывы могут дать немного различную компоновку практически для любого устройства в любой ориентации (omnia - 240x400, iphone - 320x480, droid x - 480x858, ipad - 768x1024, galaxy s3 - 720x1280, и они говорят на планшетах 1920x1080).

JJ

Answer 4

некоторые разрешения для поиска:

экран iphone (многие другие смартфоны имеют похожие размеры экрана: Разрешение 960 х 640 пикселей при 326 ppi http://www.apple.com/iphone/specs.html

экран ipad (у многих других планшетов аналогичные размеры экрана Разрешение 1024 х 768 пикселей при 132 пикселях на дюйм (ppi) http://www.apple.com/ipad/specs/

«нормальный» экран многие нормальные экраны также имеют разрешение 1024 х 768 пикселей в соответствии с: http://www.w3schools.com/browsers/browsers_display.asp но я не ручаюсь за их trustworthyness.

Сейчас я ищу дополнительные данные.