Общие точки останова для запросов СМИ на быстродействующем сайте

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

Вероятно, у меня будет максимальная ширина (не полный объем жидкости). Я думаю, что у меня будет, возможно, 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). Куда это вступает в игру и как я должен заниматься этими ситуациями?

Ответы

Ответ 1

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

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

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

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

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

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

  • Запустите свой веб-сайт на рабочем столе или ноутбуке.
  • По мере того, как вы сокращаете окно браузера, обратите внимание на то, как веб-сайт отвечает.
  • Когда вы достигнете точки, где ваш макет больше не идеален, это ваша первая точка останова.
  • Откорректируйте свой сайт для этого размера экрана (который может не иметь отношения к какому-либо устройству).
  • Сузить окно браузера.
  • Когда вы нажмете следующую проблему макета, это ваша вторая точка останова.
  • ... и т.д. и т.д.

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

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

В соответствии с одним разработчиком этот подход приближает точки останова к их первоначальному намерению:

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

~ Луи Лазарис, ImpressiveWebs

<суб > Источник: https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450

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

Ответ 2

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

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

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

Ответ 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 {}

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

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

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

JJ

Ответ 4

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

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

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

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

Теперь я ищу больше данных.