Оптимальные значения точки останова 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:
- Руководство по 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