Где резиновые сетки и медиазапросы объединяются друг с другом

Если помните, ранее в этой главе отмечалось, что наши навигационные ссылки начинают растягиваться на две строки, когда область просмотра становится определенной ширины. Мы можем решить эту проблему, использовав медиазапросы. Если ссылки умещаются в одну строку при ширине области просмотра 1060 пикселов, однако начинают растягиваться на две строки, когда область просмотра становится шириной 768 пикселов (при этом вступает в действие написанный нами ранее медиазапрос), то зададим дополнительные стили шрифтов для применения в тот момент, когда показатель ширины области просмотра будет находиться в промежутке между упомянутыми чуть выше значениями:

@media screen and (min-width: 1001px) and (max-width: 1080px) {

#navigation ul li a { font-size: 1.4em; }

}

@media screen and (min-width: 805px) and (max-width: 1000px) {

#navigation ul li a { font-size: 1.25em; }

}

@media screen and (min-width: 769px) and (max-width: 804px) {

#navigation ul li a { font-size: 1.1em; }

}

Как видите, мы сделали так, что размер шрифта будет изменяться в зависимости от ширины области просмотра и в результате ссылки всегда будут умещаться в одну строку в диапазоне значений ширины области просмотра от 769 пикселов до бесконечности. Это еще одно доказательство симбиоза медиазапросов и «резиновых» макетов: медиазапросы сглаживают шероховатости в «резиновых» макетах, а «резиновые» макеты облегчают переход от одного набора определенных стилей в том или ином медиазапросе к другому.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *