Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)
Я с этим столкнулся пару раз буквально недавно, на сайтах с закрепленной с левой стороны навигацией. У них были удобные, адаптивные разметки, отличные растягивающиеся как на маленькие, так и на большие дисплеи. Но они упустили маленькую, но очень важную подробность, которую заметит всего лишь пара человек. Я говорю о высоте viewport.
Например
Вот простая отзывчивая разметка; две колонки, которые ведут себя точно, как вы на то рассчитываете. Уменьшите или увеличьте окно браузера и вы поймете, о чем я говорю.
Эта разметка создана изначально как mobile first, с двумя контейнерами, сложенными один под другой. Затем она разбивается на две колонки, с закрепленной левой, для экрана с минимальной шириной в 800px.
1 |
@media screen and (min-width: 800px) { |
2 |
}
|
Основной контент скроллится вверх и вниз, в то время как первая колонка остается закрепленной по левому краю. Мы можем пользоваться навигацией в левой колонке, что-то наподобие.
Есть проблема
Все бы хорошо, но посмотрите на то, что происходит, когда мы сжимаем окно нашего браузера по вертикали; навигация прячется и становится недоступной.
Я не знаю никого, кто пользовался бы браузером таким образом, но все равно, мы не можем быть уверены в том, что широкий экран также означает, что он будет и высоким.
Решение
Медиа запросы способны распознать значительно больше, чем просто ширина страницы; они могут взаимодействовать с pixel-density, orientation, когда экран color или monochrome, с aspect-ratio, с кучей вещей.
В нашем случае мы можем целиком положиться на min-height, добавив второе условие в наш медиа запрос:
1 |
@media screen and (min-width: 800px) and (min-height: 500px) { |
2 |
}
|
Теперь наша зафиксированная с левой стороны навигационная панель шире 800px и как минимум выше 500px. Посмотрите на наше демо и убедитесь в этом сами.
Другое решение
Нам не нужно полностью перекраивать нашу разметку, чтобы сделать наше меню доступным. Вместо этого мы можем добавить отдельный скроллбар колонке навигации для случаев, когда размер viewport недостаточно высок, взгляните.
1 |
@media screen and (max-height:500px) { |
2 |
.col-first { |
3 |
height: 100%; |
4 |
overflow: scroll; |
5 |
}
|
6 |
}
|
Вопрос в решении проблемы наиболее комфортным способом.
Заключение
Нестандартный viewport может наложить ограничения на веб-страницу. Взгляните на то, как Gmail уменьшает padding у таблицы, если вертикального места мало:
Этот пример от Google доказывает, что брейк-поинты не означают, что разметка обязательно будет сломана, а наоборот смотрите на них, как на возможность для улучшения каких-то вещей.
В любом случае, надеюсь этот урок доказал вам важность всего, где задействуются брейк-поинты. Поделитесь с нами в комментариях, использовали ли вы когда-либо тег min-height в медиа запросах и для чего!
