Различное количество брейкпойнтов для сетки и тега
Nonverbis
48
У сеток есть брейкпойнты. Например, сетка бутстрапа:
XS = «(max-width: 575.98px)»
SM = «(min-width: 576px) and (max-width: 767.98px)»
MD = «(min-width: 768px) and (max-width: 991.98px)»
LG = «(min-width: 992px) and (max-width: 1199.98px)»
XL = «(min-width: 1200px) and (max-width: 1399.98px)»
XXL = «(min-width: 1400px)»
И у тега <picture> могут быть медиа-запросы.
Допустим, я полагаю, что для изображения у этих медиа-запросов это слишком грубый шаг. Потому что по данным метрики за год экраны вот такие:
360
25,3 %
3 076
13,4 %
2,09
1:39
375
13,8 %
1 549
17,6 %
1,94
1:59
414
11,7 %
1 410
19,6 %
1,81
1:26
412
9,27 %
1 023
14,5 %
2,12
1:49
393
6,5 %
772
17 %
1,93
1:43
1920
6,4 %
649
13,1 %
2,98
2:59
Я хочу добавить брейкпойнт 375 только для тега <picture>:
XXS = «(max-width: 374.98px)»
XS = «(min-width: 375px) and (max-width: 575.98px)»
SM = «(min-width: 576px) and (max-width: 767.98px)»
MD = «(min-width: 768px) and (max-width: 991.98px)»
LG = «(min-width: 992px) and (max-width: 1199.98px)»
XL = «(min-width: 1200px) and (max-width: 1399.98px)»
XXL = «(min-width: 1400px)»
Почему так? Потому что я согласен на резиновость верстки для данного типоразмера экрана. А вот размер изображения напрямую коррелирует с его весом. А с лишним весом я борюсь.
Вопрос: можно ли добавить лишний брейкпойнт только для тега picture? Или это будет дурно и мерзко?
Предупреждаю ответы про lazy: они не относятся к делу, потому что лениво или не лениво, а загружать картинку все равно придется. Так что лишний вес все равно — как ни крути — лишний.
Попробуйте новую Яндекс.Метрику
metrika.yandex.ru
Яндекс.Метрика поможет получить наглядные отчёты и видеозаписи действий отдельных посетителей, узнать, что ищут люди на вашем сайте, собирать статистику по каждому объявлению в Директе и следить за конверсией даже в офлайне.
webinfo1
Nonverbis : Вопрос: можно ли добавить лишний брейкпойнт только для тега picture?
Естественно. Вы можете добавлять любой стиль для любого элемента. Бутстрап — это просто готовый «конструктор», а не догма. Если у вас есть потребность в других стилях, то ваше право их добавить.
А у picture вообще про бутстрап речи вроде как нет, там srcset.
Nonverbis
И у тега <picture> могут быть медиа-запросы.
Допустим, я полагаю, что для изображения у этих медиа-запросов это слишком грубый шаг. Потому что по данным метрики за год экраны вот такие:
360
375
414
412
393
1920
Я хочу добавить брейкпойнт 375 только для тега <picture>:
Почему так? Потому что я согласен на резиновость верстки для данного типоразмера экрана. А вот размер изображения напрямую коррелирует с его весом. А с лишним весом я борюсь.
Вопрос: можно ли добавить лишний брейкпойнт только для тега picture? Или это будет дурно и мерзко?
Предупреждаю ответы про lazy: они не относятся к делу, потому что лениво или не лениво, а загружать картинку все равно придется. Так что лишний вес все равно — как ни крути — лишний.
webinfo1
Вопрос: можно ли добавить лишний брейкпойнт только для тега picture?
Естественно. Вы можете добавлять любой стиль для любого элемента. Бутстрап — это просто готовый «конструктор», а не догма. Если у вас есть потребность в других стилях, то ваше право их добавить.
А у picture вообще про бутстрап речи вроде как нет, там srcset.