Каковы хорошие значения контрольной точки 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:

• Руководство по Flexbox
• Учебник по CSS Grid
• Переменные CSS (настраиваемые свойства)
• Введение в PostCSS
• Свойство поля CSS
• Как центрировать элемент с помощью CSS
• Системные шрифты CSS
• Как напечатать HTML со стилем
• Вводное руководство по переходам CSS
• Учебник по CSS-анимации
• Введение в CSS
• Руководство по CSS
• Как настроить Tailwind с PurgeCSS и PostCSS
• Шпаргалка по попутному ветру
• Как непрерывно вращать изображение с помощью CSS
• Как сделать таблицу адаптивной с помощью CSS
• Как отлаживать CSS путем деления пополам
• Селекторы CSS
• CSS-каскад
• Специфика CSS
• Селекторы атрибутов CSS
• Цвета CSS
• Единицы CSS
• URL-адрес CSS ()
• CSS Типографика
• Коробочная модель CSS
• Свойство CSS position
• CSS Media Queries и адаптивный дизайн
• Запросы функций CSS
• CSS преобразования
• Как стилизовать списки с помощью CSS
• Префиксы поставщиков CSS
• Наследование CSS
• Псевдоклассы CSS
• Псевдоэлементы CSS
• Стилизация HTML-таблиц с помощью CSS
• Свойство CSS Display
• Функция CSS calc ()
• CSS Границы
• Импорт файла CSS с помощью @import
• Обработка ошибок CSS
• CSS фильтры
• CSS Размер окна
• CSS-фоны
• Комментарии CSS
• CSS шрифты
• CSS Padding
• CSS свойство float и очистка
• CSS нормализация
• Свойство CSS z-index
• Как отключить выделение текста с помощью CSS
• Как разместить элемент в нижней части контейнера с помощью CSS
• Как инвертировать цвета с помощью CSS
• Адаптивные предварительные теги в CSS
• Адаптивные вставки видео YouTube
• Каковы хорошие значения контрольной точки CSS для адаптивного дизайна?
• Как выровнять центр в flexbox