Адаптивная верстка с Restive.JS

[dpigo]

А какие у данного решения преимущества по сравнению аналогичными, не требующими jquery, вроде head.js?

[plutov]

В сравнении с head.js Restive.JS более узконаправленный плагин, именно для адаптивной верстки.

[dpigo]

Ну фичи-то какие-то есть кроме добавления классов, кастомных брейкпоинтов и событий, раз спеуиализация такая узкая? Потому что учитывая отвязанность от jquery и модульного при прочих равных переходить на restive.js с head.js смысла я пока не вижу.

[vdv73rus]

Я всё равно буду пользоваться media queries

[lampa]

.scr {
    float: left;
    display: inline-block;
    width: 25%;
}

@media screen and (max-width: 680px) {
    .scr {
        width: 50%;
    }
}

[plutov]

.scr {
    float: left;
    display: inline-block;
    width: 25%;
}

.mobile .scr {
    width: 50%;
}

[VasilioRuzanni]

// Sass

.scr {
  float: left;
  display: inline-block;
  width: 25%;

  @media #{$medium-or-less} {
    width: 50%;
  }
}

[ImKremen]

// Less

.scr {
  float: left;
  display: inline-block;
  width: 25%;

  @media @mobile {
    width: 50%;
  }
}

[apian]

Ребята, вы в самом деле написали бы такой код?
float: left; display: inline-block;

[ImKremen]

Нет) Это вопрос к lampa

[felixexter]

display: inline-block; в этом примере лишний.
Если задаётся float: left;, то элемент автоматически будет display: block;.

[dima117]

Насколько я понимаю, к достоинствам можно отнести:
— верстка зависит от css-классов (дополнительный уровень абстракции) вся конфигурация находится в одном месте. Например, если вы захотите изменить значение минимальной ширины, то не нужно будет искать все media queries, где оно используется.
— можно навешивать дополнительные классы (например, зависящие от ориентации экрана, типа устройства или браузера, ОС и т.д.). Например, вместо применения css-хаков для старых версий ie можно пометить контейнер классом и прописать стили для него.

Как мне кажется, в небольших проектах потребность в таком функционале редко возникает. Я бы использовал media queries (чтобы не подключать в проект лишний скрипт). Но в проектах со сложной версткой такой подход может быть удобнее. Например, насколько я знаю, этот подход используют в outlook.com.

[vdv73rus]

— давно есть утилитки, группирующие media queries
— ну такое делать лучше через feature detection (f.e. modernizr)

[carino]

Не очень понимаю чем не удобны media queries. Подключать лишний скрипт, чтобы подключить функциональность, которая уже есть…

[franzose]

… и вместо всего этого пользоваться LESS/SASS/..., делая запись и удобной, и приятной)

[Fidget]

Вот интересно как рисуется адаптивный дизайн? Есть же какие-то правила для дизайнера, которые нельзя нарушать.

[steppefox]

Самое первое из их длинного списка правил: Не пытайся впихнуть невпихуемое.

[apian]

Я рекомендую руководствоваться следующими принципами:
— за одну сессию устройство сменить нельзя, а ориентацию можно;
— пользователь не должен ждать загрузки стилей / отрисовки страницы при смене ориентации экрана.

Решение такое:
— определяем на сервере устройство;
— отдаем стили для различных ориентаций в одном файле;
— на продакшене стили лежат исключительно в 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
			}
		}
	}

[505abc]

Аналогичное решение. Только подход с другого боку.