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

Артём Поликарпов

Действительно, в Сасе есть замечательная возможность примешивать медиавыражения прямо в контексте нужного стиля. Вот такой 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.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

Ваш комментарий

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