брейкпоинты @media css

12
L
На сайте с 01.02.2011
Offline
163
221
Для реализации моей задумки необходимо определиться с так называемыми брейкпоинтами.
Это не работа с адаптивностью конкретного сайта, здесь постановка задачи - это самоцель.
Технически нужно добиться следующего: чтобы между каждыми двумя брейкпоинтами выводился разный контент.
С самим выводом проблем нет, нужно лишь определиться с точками.

И так, если ориентироваться на бустрап v5, то предлагается следующий набор:
1400, 1200, 992, 768, 576

Однако на более архаичных сборках я часто вижу точку 544, вместо 576.
И так же - 2 точки ниже: 480 и 320 (они в документации бустрапа 5 вообще не фигурируют).

Собственно как должен выглядеть перечень точек, дабы  вариативностью удовлетворить максимум устройств?
т.е. выводя картинку максимально подстать устройству.
особенно волнует выбор между 544 и 576.

И второй вопрос: как лучше задать условия, если работа будет с ксс?
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
нужны ли такие детальные уточнения? десятые или сотые доли пикселя? (взято с документации v5).
и непонятно, почему в таком случае на конце сотой доли -  8, а не 9.

W1
На сайте с 22.01.2021
Offline
284
#1
Linblack :
Это не работа с адаптивностью конкретного сайта, здесь постановка задачи - это самоцель.

Неправильная самоцель. В разрезе последующих вопросов, всё зависит от конкретного сайта.

Linblack :
2 точки ниже: 480 и 320

Это точки для телефонов. Если такая детализация нужна на конкретном сайте, то нужно их учитывать.

Linblack :
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
нужны ли такие детальные уточнения? десятые или сотые доли пикселя? (взято с документации v5).
и непонятно, почему в таком случае на конце сотой доли -  8, а не 9.

Это условность. Полагаю, что 8, а не 9 - для исключения ошибки браузерного вычисления размера. По-видимому, это результат экспериментов разработчиков бутстрапа.

Мой форум - https://webinfo.guru –Там я всегда на связи
D.iK.iJ
На сайте с 26.05.2013
Offline
225
#2

Ну, в Бустрап в 17 году вообще как-то так было:

Разрешения экрана для адаптивной верстки

Мне всегда нормальным по разрешениям казалось вот такое:

/*** Standart ***/
@media screen and (max-width: 960px) {
}
/*** iPhone (portrait) ***/
@media screen and (max-width: 775px) {
}
/*** iPhone (landscape) ***/
@media screen and (max-width: 500px) {
}

Ну и 320 захватить. Для старых устройств.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
L
На сайте с 01.02.2011
Offline
163
#3
D.iK.iJ #:

Ну, в Бустрап в 17 году вообще как-то так было:

Мне всегда нормальным по разрешениям казалось вот такое:

Ну и 320 захватить. Для старых устройств.

ну 320 это как я понял старые айфоны в вертикалке.

может какая то более детальная специфика по устройствам есть?
ну из разряда какой % каких экранов в каких интервалах в среднем ныне фигурирует

D.iK.iJ
На сайте с 26.05.2013
Offline
225
#4

У меня - точно нет. можно по F12, например, посмотреть список устройств с разрешениями, которые предлагает тот же Гугл (в настройках).

Еще у  liveinternet, кажется, есть статистика разрешений:

https://www.liveinternet.ru/stat/ru/resolutions.html?period=month

или вот еще нагуглил:

https://gs.statcounter.com/screen-resolution-stats

L
На сайте с 01.02.2011
Offline
163
#5
D.iK.iJ #:

У меня - точно нет. можно по F12, например, посмотреть список устройств с разрешениями, которые предлагает тот же Гугл (в настройках).

Еще у  liveinternet, кажется, есть статистика разрешений:

https://www.liveinternet.ru/stat/ru/resolutions.html?period=month

или вот еще нагуглил:

https://gs.statcounter.com/screen-resolution-stats

спасибо. но теперь еще больше вопросов, на тему того -  что вообще привело к постановке таких точек.
ибо ощущение что они как будто между реальными брейкпоинтами находяться.
апелируя к статистике логичнее было бы расставить по типу:
1440, 1280, 1024, 800, 640 и тд
может там плюсуется или вычитается какой то технический браузерный показатель или вроде того?

A9
На сайте с 19.03.2018
Offline
74
#6

никогда не понимал, зачем ограничивать ширину контейнера. Всегда лучше выводить страницу во всю ширину экрана, а сам контент (товары, порнуху, картинки) растягивать под ширину страницы.

То есть, определять не размеры контейнера по ширине, а количество элементов в зависимости от ширины.

Например, до 450пикселей (притом не обязательно ширины экрана, а ширины требуемого контейнера) выводить по 2 элемента, до 750 выводить по 3 элемента и т.д. А ширину самих элементов пересчитывать автоматически.

tommy-gung
На сайте с 22.11.2006
Offline
287
#7

лучше ориентироваться на свой контент

ps: bootstrap - для прототипов
Здесь не могла быть ваша реклама
W1
На сайте с 22.01.2021
Offline
284
#8
aramid92 #:

никогда не понимал, зачем ограничивать ширину контейнера. Всегда лучше выводить страницу во всю ширину экрана, а сам контент (товары, порнуху, картинки) растягивать под ширину страницы.

То есть, определять не размеры контейнера по ширине, а количество элементов в зависимости от ширины.

Какое отношение имеют эти Ваши рассуждения к обсуждаемой теме?

W1
На сайте с 22.01.2021
Offline
284
#9
Linblack #:
ощущение что они как будто между реальными брейкпоинтами находяться

Поставьте себе на сайт скрипт, определяющий ширину экрана, и собирайте себе свою статистику. Вот тогда сложится реальное ощущение относительно реальных посетителей Вашего сайта.

L
На сайте с 01.02.2011
Offline
163
#10
webinfo1 #:

Поставьте себе на сайт скрипт, определяющий ширину экрана, и собирайте себе свою статистику. Вот тогда сложится реальное ощущение относительно реальных посетителей Вашего сайта.

да епт я не сайт делаю :D
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий