Я проводил некоторые исследования медиазапросов и до сих пор не понимаю, как настроить таргетинг на устройства определенных размеров.
Я хочу иметь возможность ориентироваться на настольные ПК, планшеты и мобильные устройства. Я знаю, что будут некоторые несоответствия, но было бы неплохо иметь общую систему, которая может использоваться для нацеливания на эти устройства.
Некоторые примеры, которые я нашел:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Или:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
Какими должны быть точки останова для каждого устройства?
css
mobile
media-queries
tablet
Betamax
источник
источник
Ответы:
ИМО это лучшие точки останова:
Изменить : Улучшен для работы с 960 сетками:
На практике многие дизайнеры конвертируют пиксели в ems, в большинстве случаев лучше использовать масштабирование. При стандартном зуме
1em === 16px
. Умножьте пиксели на,1em/16px
чтобы получить ЭМС. Например,320px === 20em
.В ответ на комментарий,
min-width
это стандартная конструкция «сначала для мобильных устройств», в которой вы начинаете с разработки дизайна для своих самых маленьких экранов, а затем добавляете постоянно растущие медиазапросы, прокладывая себе путь к большим и большим экранам. Независимо от того, предпочитаете ли выmin-
,max-
или их комбинации, быть осведомленным о порядке ваших правил, имея в виду , что если несколько правил соответствует один и тот же элемент, более поздние правила будут переопределять более ранние правила.источник
min-width: 320px
CSS отменяетmin-width: 801px
?Не предназначайтесь для определенных устройств или размеров!
Общая мудрость это не ориентированы на конкретные устройства или размеры , но рефреймировать термин «точка останова»:
Вы можете использовать responseivepx.com, чтобы найти «естественные» точки останова, как в «точках останова» Марка Драммонда .
Используйте естественные точки останова
Затем «точки останова» становятся фактической точкой, в которой ваш мобильный дизайн начинает «ломаться», то есть перестает быть полезным или визуально приятным. Если у вас есть хорошо работающий мобильный сайт, без медиазапросов, вы можете перестать беспокоиться о конкретных размерах и просто добавлять медиазапросы, которые обрабатывают последовательно большие области просмотра.
Если вы не пытаетесь привязать дизайн к точному размеру экрана, этот подход работает, устраняя необходимость ориентироваться на конкретные устройства . Целостность самой конструкции на каждой точку гарантирует , что она будет держать в любом размере. Другими словами, если раздел меню / содержимого / что-либо еще перестает использоваться при определенном размере, создайте точку останова для этого размера , а не для определенного размера устройства.
Посмотрите пост Лайзы Гарднер о поведенческих точках останова , а также пост Зельдмана об Итане Маркотте и о том, как адаптивный веб-дизайн развился из первоначальной идеи.
Используйте семантическую разметку
Кроме того, более простая и семантическая структура DOM с
nav
,header
,main
,section
, иfooter
т.д. (избегая мерзости , какdiv class="header"
с вложенными внутреннимиdiv
тегами) , тем легче будет инженер отзывчивости, особенно избегая поплавки с помощью CSS Grid Layout (Sarah Drasner в генераторе сетки является отличный инструмент для этого) и flexbox для организации и повторного заказа в соответствии с вашим планом проектирования RWD.источник
Если вы хотите настроить таргетинг на устройство, просто напишите
min-device-width
. Например:Для iPhone
Для планшетов
Вот несколько хороших статей:
источник
@media only screen and (min-device-width: 1024){}
или что-то подобное, чтобы отменить эти изменения. В качестве альтернативы, вы могли бы сделать это,@media only screen and (MAX-device-width: 1024){}
если вы начали с дизайна рабочего стола и хотите вносить изменения только в вещи меньше 1024.Я использовал этот сайт, чтобы найти разрешение и разработал CSS для фактических чисел. Мои цифры немного отличаются от приведенных выше ответов, за исключением того, что мой CSS на самом деле попадает на нужные устройства.
Кроме того, имейте этот отладочный фрагмент кода сразу после вашего медиа-запроса, например:
Добавьте этот элемент отладки в каждый медиазапрос, и вы увидите, какой запрос был применен.
источник
Лучшие точки останова, рекомендованные Twitter Bootstrap
источник
Медиа-запросы для общих точек останова устройства
источник
источник
Это не вопрос количества пикселей, это фактический размер (в мм или дюймах) символов на экране, который зависит от плотности пикселей. Следовательно, «min-width:» и «max-width:» бесполезны. Полное объяснение этой проблемы здесь: что такое соотношение пикселей устройства?
Запросы «@media» учитывают количество пикселей и соотношение пикселей устройства, что приводит к «виртуальному разрешению», которое вы должны учитывать при разработке своей страницы: если ваш шрифт имеет фиксированную ширину 10 пикселей и «» виртуальное горизонтальное разрешение »составляет 300 пикселей, для заполнения строки потребуется 30 символов.
источник
В настоящее время наиболее распространенным явлением является просмотр устройств с сетчаткой, другими словами: устройств с высоким разрешением и очень высокой плотностью пикселей (но обычно меньше, чем физический размер менее 6 дюймов). Вот почему вам нужно будет отображать на своем CSS специализированные медиа-запросы. Это самый полный пример, который я смог найти:
Источник: Сайт CSS-Tricks
источник
Поскольку существует много размеров Различной экраны , которые всегда меняются , и , скорее всего , всегда будет меняться лучшим путем, чтобы основывать свои точки разрыва и медиа - запросы на вашем дизайне.
Самый простой способ сделать это - получить готовый дизайн рабочего стола и открыть его в веб-браузере. Медленно уменьшайте экран, чтобы сделать его уже. Наблюдайте, чтобы увидеть, когда дизайн начинает «ломаться» или выглядит ужасно и тесно. На этом этапе потребуется точка останова с медиа-запросом.
Распространено создание трех наборов медиа-запросов для рабочего стола, планшета и телефона. Но если ваш дизайн выглядит хорошо на всех трех, зачем беспокоиться о сложности добавления трех разных медиа-запросов, которые не нужны. Делайте это по мере необходимости!
источник
Еще одна особенность - вы также можете использовать медиа-запросы в атрибуте медиа
<link>
тега.При этом браузер загрузит все CSS-ресурсы независимо от атрибута media . Разница в том, что если media-запрос атрибута media оценивается как false, то этот файл .css и его содержимое не будут блокировать рендеринг.
Поэтому рекомендуется использовать атрибут media в
<link>
теге, поскольку он гарантирует лучшее взаимодействие с пользователем.Здесь вы можете прочитать статью Google об этой проблеме https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css.
Некоторые инструменты, которые помогут вам автоматизировать разделение кода CSS на разные файлы в соответствии с вашими медиа-запросами.
Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin
PostCSS https://www.npmjs.com/package/postcss-extract-media-query
источник
Поведение не меняется на рабочем столе. Но на планшетах и мобильных телефонах я расширяю панель навигации, чтобы охватить большое изображение логотипа. Примечание. Используйте поля (верх и низ) столько, сколько вам нужно для высоты вашего логотипа.
Для моего случая 60px top и bottom работали отлично!
Проверьте навигационную панель здесь .
источник
источник
Я использую следующий, чтобы сделать свою работу.
источник
источник