x
 
↑
Май
2 •
4 •
•

2 •

9 •
↓
Сергей Дроганов
9 мая 2013

Допустим, я делаю сайт с использованием медиавыражений. Есть основная версия и версии для устройств.

Некоторые пользователи хотят пользоваться полной версией даже на мобильных устройствах, и не хочется лишать их такого права. Но медиавыражения включаются автоматически.

Как принудительно включать полную версию на мобильном устройстве?

Я использую Компас, поэтому медиавыражения содержатся в коде основного стиля. Вынести их во внешний файл для того, чтобы подключать и отключать, не получается, вернее, неудобно. Класс-маркер на <body> тоже лишает удобства подключать медиавыражения в любом месте каскада.

Сталкивались ли вы с подобной проблемой, как решали?


Действительно, в Сасе есть замечательная возможность примешивать медиавыражения прямо в контексте нужного стиля. Вот такой profile-pic.scss:

$breakSmall: 320px;
$breakLarge: 1200px;

.profile-pic {
  float: left;
  width: 250px;
  @media screen and (max-width: $breakSmall) {
    width: 100px;
    float: none;
  }
  @media screen and (min-width: $breakLarge) {
    float: right;
  }
}

Скомпилируется в profile-pic.css:

.profile-pic {
  float: left;
  width: 250px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}
@media screen and (min-width: 1200px) {
  .profile-pic {
    float: right;
  }
}

Я вижу два способа отменить правила внутри медиавыражений.

Чтобы стили для телефона не сработали на телефоне, хорошо бы вовсе не загружать такие стили на телефон :-) Но тогда придётся или жертовать удобством — писать правила для устройств в отдельном файле и не подключать его, если пользователь нажал «смотреть полную версию». Или написать какой-то постпроцессор, который эти правила вынесет в отдельный файл автоматически.

Второй способ — класс-маркер для <html>. Трюк — амперсанд, написанный справа, превратит селектор в контекстный модификатор:

 
.reklama {
  background: #ffa;
  @media screen and (max-width: 640px) {
    html.mq & {
      /* Прячем рекламу на маленьких экранах */
      display: none;
    }
  }
}

Итоговый reklama.css:

.reklama {
  background: #ffa;
}
@media screen and (max-width: 640px) {
  html.mq .reklama {
    display: none;
  }
}

Удобства не убавилось — стили под медиавыражениями пишутся вместе с основными, но срабатывают только, если у <html> есть класс mq.

Остаётся записать в куки, что пользователь выбрал полную версию и не добавлять класс-маркер в разметку.


Ещё не забудьте о вьюпорте. Если сайт адаптируется под любое устройство, в секции head напишите:

<meta name="viewport" content="width=device-width">

Когда показываете только широкую версию, укажите минимальную ширину макета:

<meta name="viewport" content="width=960">

Должен признаться, я долгое время не знал о таком способе задавать контекст, а теперь не представляю, как жить без правого амперсанда.

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
Типовые решения в вёрстке. Как сверстать гамбургерное меню Рецепт: бегущая строка на сайте без Яваскрипта 2 • Как правильно работать с начертаниями подключаемого шрифта в ЦСС? Что дизайнеру стоит знать о якорных ссылках?




Недавно всплыло

1 • 2 • Диаграмма футбольных трансферов. Результат 5 • 1 •