Комментарии 19
А какие у данного решения преимущества по сравнению аналогичными, не требующими jquery, вроде head.js?
Я всё равно буду пользоваться media queries
.scr {
float: left;
display: inline-block;
width: 25%;
}
@media screen and (max-width: 680px) {
.scr {
width: 50%;
}
}
.scr {
float: left;
display: inline-block;
width: 25%;
}
.mobile .scr {
width: 50%;
}
// Sass
.scr {
float: left;
display: inline-block;
width: 25%;
@media #{$medium-or-less} {
width: 50%;
}
}
// Less
.scr {
float: left;
display: inline-block;
width: 25%;
@media @mobile {
width: 50%;
}
}
Ребята, вы в самом деле написали бы такой код?
float: left;
display: inline-block;
Нет) Это вопрос к lampa
display: inline-block; в этом примере лишний.Если задаётся
float: left;, то элемент автоматически будет display: block;.
Насколько я понимаю, к достоинствам можно отнести:
— верстка зависит от css-классов (дополнительный уровень абстракции) вся конфигурация находится в одном месте. Например, если вы захотите изменить значение минимальной ширины, то не нужно будет искать все media queries, где оно используется.
— можно навешивать дополнительные классы (например, зависящие от ориентации экрана, типа устройства или браузера, ОС и т.д.). Например, вместо применения css-хаков для старых версий ie можно пометить контейнер классом и прописать стили для него.
Как мне кажется, в небольших проектах потребность в таком функционале редко возникает. Я бы использовал media queries (чтобы не подключать в проект лишний скрипт). Но в проектах со сложной версткой такой подход может быть удобнее. Например, насколько я знаю, этот подход используют в outlook.com.
— верстка зависит от css-классов (дополнительный уровень абстракции) вся конфигурация находится в одном месте. Например, если вы захотите изменить значение минимальной ширины, то не нужно будет искать все media queries, где оно используется.
— можно навешивать дополнительные классы (например, зависящие от ориентации экрана, типа устройства или браузера, ОС и т.д.). Например, вместо применения css-хаков для старых версий ie можно пометить контейнер классом и прописать стили для него.
Как мне кажется, в небольших проектах потребность в таком функционале редко возникает. Я бы использовал media queries (чтобы не подключать в проект лишний скрипт). Но в проектах со сложной версткой такой подход может быть удобнее. Например, насколько я знаю, этот подход используют в outlook.com.
Не очень понимаю чем не удобны media queries. Подключать лишний скрипт, чтобы подключить функциональность, которая уже есть…
Вот интересно как рисуется адаптивный дизайн? Есть же какие-то правила для дизайнера, которые нельзя нарушать.
Я рекомендую руководствоваться следующими принципами:
— за одну сессию устройство сменить нельзя, а ориентацию можно;
— пользователь не должен ждать загрузки стилей / отрисовки страницы при смене ориентации экрана.
Решение такое:
— определяем на сервере устройство;
— отдаем стили для различных ориентаций в одном файле;
— на продакшене стили лежат исключительно в CSS;
— а при разработке использовать переменные, а-ля $device и миксины а-ля tablet_p.
— за одну сессию устройство сменить нельзя, а ориентацию можно;
— пользователь не должен ждать загрузки стилей / отрисовки страницы при смене ориентации экрана.
Решение такое:
— определяем на сервере устройство;
— отдаем стили для различных ориентаций в одном файле;
— на продакшене стили лежат исключительно в CSS;
— а при разработке использовать переменные, а-ля $device и миксины а-ля tablet_p.
.bla {
// common style
@if $device == desktop {
// style for desktop
}
@if $device == tablet {
// style for tablet portrait
@include tablet_p {
// style for tablet portrait
}
@include tablet_l {
// style for tablet landscape
}
}
}
Аналогичное решение. Только подход с другого боку.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Адаптивная верстка с Restive.JS