Каковы хорошие значения контрольной точки CSS для адаптивного дизайна?

Оптимальные значения точки останова CSS, которые я использую в своих проектах

При разработке сайта я заметил, что использую довольно случайные значения для точек останова CSS. Иногда округленное значение, например 800 или 1200, иногда конкретное значение с точностью до пикселя, например 672.

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

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

У нас есть 5 основных размеров устройств, о которых нужно беспокоиться:

  • мобильный портрет
  • мобильный ландшафт
  • планшетный портрет
  • планшетный пейзаж
  • ноутбук

Эти устройства сопоставляются с этими значениями пикселей:

  • мобильный портрет: менее 640 пикселей
  • мобильный ландшафт:> 640 пикселей
  • портретная ориентация планшета:> 768 пикселей
  • планшет в альбомной ориентации:> 1024 пикселей
  • ноутбук:> 1280 пикселей

Я взял эти значения изПопутный ветер по умолчанию.

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

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

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

Вот медиа-запросы, которые я буду использовать с этого момента:

@media (min-width: 640px) {

}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 1280px) {

}

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: