Привет. Отличный шаблон для верстки, пользуюсь с удовольствием! Обнаружил такой нюанс.
Ты говорил, что брейкпоинты в media.sass основаны на сетке bootstrap. В бутстрап-сетке все по принципу mobile-first-aproach, там везде параметры min-width.
Если если верстать desktop-first, то значения брейкпоинтов нужно уменьшить на 1px.
Разница существенна, т.к. если указана max-width, то на брейкпоинте сетка бутсрапа меняется, а стили нет. Посмотри на примере разрешения для ipad 768x1024. В бутстрап-сетке это разрешение попадает под small devices (и сетка перестраивается под sm) а стили попадают под правило для md ( до 992пх).
Получается, что на iphone и на ipad одинаковые стили( т.к. попадают под правило (max-width: 768px), а макет меняется по бутстрапу.
Поэтому для desktop-first в bootstrap верстке принято делать меньше на 1px (max-width:767px)
И поэтому сейчас все комментарии для брейкоинтов desktop-first не актуальны, например
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px)
А это не средние девайсы и десктопы, а маленькие девайсы и планшеты
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px)
А это не широкие экраны, а средние девайсы и десктопы
Вобщем в корне меняются понятия с использованием max-width. Думаю, ты разберешься. Заметил в тебе частичку перфекциониста,поэтому согласишься, что так будет правильней.
p.s. а вообще mobile-first рулит. Пару версток и становится реально проще верстать, советую разобрать в следующих джедаях верстки именно mobile-first
Привет. Отличный шаблон для верстки, пользуюсь с удовольствием! Обнаружил такой нюанс.
Ты говорил, что брейкпоинты в media.sass основаны на сетке bootstrap. В бутстрап-сетке все по принципу mobile-first-aproach, там везде параметры min-width.
Если если верстать desktop-first, то значения брейкпоинтов нужно уменьшить на 1px.
Разница существенна, т.к. если указана max-width, то на брейкпоинте сетка бутсрапа меняется, а стили нет. Посмотри на примере разрешения для ipad 768x1024. В бутстрап-сетке это разрешение попадает под small devices (и сетка перестраивается под sm) а стили попадают под правило для md ( до 992пх).
Получается, что на iphone и на ipad одинаковые стили( т.к. попадают под правило (max-width: 768px), а макет меняется по бутстрапу.
Поэтому для desktop-first в bootstrap верстке принято делать меньше на 1px (max-width:767px)
И поэтому сейчас все комментарии для брейкоинтов desktop-first не актуальны, например
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px)
А это не средние девайсы и десктопы, а маленькие девайсы и планшеты
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px)
А это не широкие экраны, а средние девайсы и десктопы
Вобщем в корне меняются понятия с использованием max-width. Думаю, ты разберешься. Заметил в тебе частичку перфекциониста,поэтому согласишься, что так будет правильней.
p.s. а вообще mobile-first рулит. Пару версток и становится реально проще верстать, советую разобрать в следующих джедаях верстки именно mobile-first