Иногда верстальщику нужно изменять стили сайта на экранах с разными пропорциями. Недавно мы столкнулись с такой задачей при вёрстке промостраниц нового продукта бюро — лекций.
На промостраницах есть верхний этаж с видео, мы хотели показывать его в классической пропорции 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.