Иногда верстальщику нужно изменять стили сайта на экранах с разными пропорциями. Недавно мы столкнулись с такой задачей при вёрстке промостраниц нового продукта бюро — лекций.

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

Чтобы решить эту проблему, мы придумали показывать видео в 16:9 только для окна с пропорцией 16:10 и больше, чтобы быть уверенными, что видео не займёт всё окно. А на меньших пропорциях окна мы стали показывать видео в 16:7.

Видео меняет собственные пропорции в зависимости от пропорций окна

Часто для решения подобных задач верстальщики подключают тяжёлую артиллерию Яваскрипта и начинают вычислять размеры и пропорции, а затем на основе этих вычислений меняют вёрстку. Такое программирование обязательно затянет работу и усложнит поддержку вёрстки в будущем. Ещё при работе с размерами окна из Яваскрипта придётся учесть разные особенности браузеров и краевые ситуации: изменение размеров окна или поворот экрана устройства.

Можно сделать проще. Нам помогут медиа‑запросы — специальные операторы ЦСС, в которых можно задавать разные стили в зависимости от особенностей окна, браузера и устройства пользователя.

Обычно в медиа‑запросах задают стили для разной ширины окна и для мобильных устройств. Подробнее об этом рассказывал Василий Половнёв в своём большом совете про адаптивную вёрстку.

В медиа‑запросах можно проверять не только размеры окна, но и другие параметры, в том числе и нужные нам пропорции окна. Как и с размерами, можно применять стили до или после определённой точки, используя условия max- или min-aspect-ratio:

@media screen and (max-aspect-ratio: 16 / 9) {
  /* Стили для окна с пропорцией до 16:9 */
}
      ​  
@media screen and (min-aspect-ratio: 16 / 10) {
  /* Стили для окна с пропорцией от 16:10 */
}

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

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы