Comments 18
media("within", "md") и media("within", "lg") сработают при ширине экрана 768px?
в любом случае, вместе они никогда не сработают, что-то да переопределит :))
спасибо за замечание!
действительно, лучше +1px между)
так что надо поменять строку:
media only screen and (min-width: getPreviousSize($media)+1) and (max-width: ...
За медиа вида
(max-width: 768px) and (min-width: 577px)
Расстреливал на месте б. Ни чего личного. Просто такое можно встретить только в древнем легаси коде, или если человек совершенно не понимает откуда берутся эти чудо реперные переходы в 320 480 600 768 991… и пилит свой велосипед лишь бы перебить код коллеги
Не вижу ничего плохого в том, чтобы руками писать media queries в современном виде, слегка приправленные sass'ом и обработанные postcss-плагином:
/* файл breakpoints.scss */
$xs: 320px;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
/* файл main.scss */
@use 'breakpoints' as bp;
@media (width >= bp.$xs) and (width < bp.$sm) {
/* ... */
}мне кажется, что это намного сложночитабельнее, чем "@include media("within", "md") ". но дело ваше :)
Не вижу причин использовать брейкпоинты в переменных вообще.
Переносить контент надо по его содержимому, а не по его ближайшему значению ширины в переменной. Пишу сразу в пикселях нужное мне значение ширины экрана. Если вы боитесь, что раздует css — нет, по результатам не раздует.
переносить контент иногда приходится так, как дизайнер нарисовал, или клиент сказал)))
и если не видите причины использовать переменные, то чтож
Именно поэтому переменные менее гибкие
надеюсь, мне никогда в жизни не придётся прийти в проект, где был верстальщик, который говорил, что переменные не гибкие :)
иначе это будет бесконечное путешествие по поиску абсолютно рандомных брекпоинтов по всему проекту)
Переменные в брейкпоинтах совсем не гибкие, да. Они срабатывают не по контенту, как вы хотите, а по некой исторической условности, с которой потом приходится ещё и бороться. Бутстрапу так было нужно, вне бутстрапа это просто страх потери привычки. Если у вас scss сделан так, что одна сущность меняется в одном месте вместе с медиа модификаторами, то и искать ничего и не нужно. Кода меньше из-за того что вы не натягивание абстракцию. Не очень удобно искать в scss при использовании бэм &_item, но это общая проблема.
Искать по уникальным значениям ширины экрана место в css гараздо проще, чем по именам четырех переменных. У вас перед глазами открыт дебагер, который показывает ширину при которой происходит всхолпывание блоков, если есть сложности с поисками.
По факту уникальных брейкпоинтов выходит совсем не много, как это кажется, нет смысла их запоминать. Если нужно сделать брейкпоинт в рамках модуля, где будет много однотипных брейкпоинтов, локально объявляется переменная и все.
Я именно отказался от сетки бутстрапа что с ней больше борешься и подстраиваешься. А так сверстал, тянешь браузер, о, пора делать модификацию при 740px ширины. Другой блок, о, при 930px и при 450px. И никаких этих вымышленных мидл смол лардж.
Простое правило — модифицировать надо по нужде, а не по усреднённым значениям размеров экранов, где из-за этого на практике постоянно вылезает то да это.
Мне очень сложно понять, о чём Вы пишите.
- Срабатывают брекпоинты не по "исторической условности", а при соответствующих разрешениях экрана устройства. И это чертовски удобно!
- В статье было указано, что я столкнулась с проектом, написанном на Angular. Поэтому мне нужно было объявить какой-то variables.scss, чтобы от него унаследоваться в компонентах, где мне нужно написать медиазапрос. Как минимум, так человекопонятнее.
- В проектах на Angular изначально у Вас не так много возможностей с консолью, чтобы смотреть, где какой модуль схлопывается при каком разрешении и какое правило срабатывает.
- Я вообще не понимаю фраз, типа "сверстал, тянешь браузер, о, пора делать модификацию при 740px ширины". Разве, когда Вы верстаете, нет никаких шаблонов для планшетной, мобильной итд версий? Я никогда не верстала "о, а вот тут пора переносить". Только чёткий пиксель пёрфект на всех разрешениях. Никогда не было такого, чтобы в промежуточных каких-то разрешениях вёрстка рушилась настолько, чтобы мне надо было вводить какой-то новый непредусмотренный дизайном брекпоинт и что-то там по нему перестраивать.
- "Не очень удобно искать в scss при использовании бэм &_item" — хз, наводите на переменную, нажимаете, например, ctrl (или что у Вас в редакторе используется) и находите абсолютно все упоминания по проекту.
- "Я именно отказался от сетки бутстрапа что с ней больше борешься и подстраиваешься" — так я и не использую эту сетку) Пишите любые нужные вам разрешения в мой вариант и всё будет круто)
- Я не согласна с "модифицировать надо по нужде, а не по усреднённым значениям размеров экранов". Я привыкла работать "чисто".
а при соответствующих разрешениях экрана устройства. И это чертовски удобно!
Размеров экранов очень много. Бутстраповские размеры экранов просто усреднены.
Разве, когда Вы верстаете, нет никаких шаблонов для планшетной, мобильной итд версий?
В моем случае нет. Честно говоря, я мало в этом вижу толку, если это не что-то новенькое. Адаптивка работает по одинаковым законам. Что-то скрываешь, что-то уменьшаешь, что-то добавляешь. По мне достаточно скелетного прототипа для мобильной версии и планшета. Их дизайн, рисуется только для жесткого согласования как с заказчиком так и для сотрудников.
Только чёткий пиксель пёрфект на всех разрешениях.
Это скорее коммерческое требование, которого в реале не существует из-за того что устройства не выпускаются именно так, как это задано в переменных брейкпоинтов. То есть это не техническое обоснование, а коммерческое. Тут у меня нет возражений.
чтобы мне надо было вводить какой-то новый непредусмотренный дизайном
Так дизайн предусмотрел уже. Он нарисован под бутсраповскую сетку. Поэтому ничего и не рушится.
Например, меню, единственным кошерным вариантом я рассматриваю только это решение github.com/gijsroge/priority-navigation
Оно работает одинаково на любом устройстве. Поведение этого элемента очевидно без дизайна для мобильных устройств.
Я привыкла работать «чисто».
Вы описываете ощущение чистоты скорее всего как регулярное воспроизведение понятного вам опыта.
getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints
media-breakpoint-up(SIZE)
media-breakpoint-down(SIZE)
media-breakpoint-only(SIZE)
при необходимости можно еще сделать
media-breakpoint-within(min_size, max_size)
таким образом меньше переменных передавать и меньше шанс ошибки
Медиазапросы в SCSS — ещё один удобный способ использования @media screen