Page 234 - Сила CSS3 Освой новейший стандарт

234 • Глава 6. Разные размеры экрана, разный дизайн

• (min-device-width: 320px) and (max-device-width: 480px) срабатывает на мобильных
телефонах с разрешением экрана 320×480 пикселов (таких как устройства iPhone
и Android) в портретной и альбомной ориентации;
• (max-width: 320px) срабатывает на мобильных телефонах с разрешением экрана
320×480 пикселов только в портретной ориентации;
• (min-width: 321px) срабатывает на мобильных телефонах с разрешением экрана
320×480 пикселов только в альбомной ориентации;
• (min-device-width: 768px) and (max-device-width: 1024px) срабатывает на устройстве
iPad с любой ориентацией экрана;
• (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)
срабатывает на устройствах iPad только в альбомной ориентации. Также работает для
настольных браузеров, ширина окна которых превышает высоту, на экранах шириной
1024 пиксела или меньше;
• (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)
срабатывает на устройствах iPad только в портретной ориентации. Также работает для
настольных браузеров, высота окна которых превышает ширину, на экранах шириной
1024 пиксела или меньше.

Чтобы два медиазапроса не перекрывали друг друга, в запрос для 760 пикселов
можно добавить минимальную ширину области просмотра:
@media screen and (min-width: 551px) and (max-width: 760px)
Этот медиазапрос будет срабатывать только для окон шириной 551–760 пикселов
и игнорироваться на мобильных устройствах шириной менее 551 пиксела. В за-
висимости от особенностей того или иного проекта, это может быть хорошо или
плохо. В нашем случае это означает необходимость скопировать часть правил из
медиазапроса для 760 пикселов в запрос для 550 пикселов, так как многие стили
в них повторяются. Например, вступительный абзац должен выводиться в одном
столбце в обоих этих макетах. Когда два медиазапроса перекрываются, мы можем
добавить соответствующее объявление стиля только в запрос для 760 пикселов,
и этот стиль также будет использоваться в окнах шириной меньше 550 пикселов.
На нашей странице перекрывающиеся медиазапросы позволяют повторно исполь-
зовать несколько ранее объявленных стилей и не усложнять без надобности код
CSS. Однако на других сайтах для каждой ширины окна могут требоваться свои
уникальные стили, и тогда лучше объявлять медиазапросы так, чтобы они не пере-
крывались. Кроме того, разграничение медиазапросов упрощает понимание кода,
поскольку вам не приходится отслеживать каскадное применение стилей. И снова,
единого универсального ответа на вопрос, должны ли медиазапросы перекрываться,
не существует: все зависит от конкретной задачи.

Мы оставим медиазапрос для 760 пикселов в том виде, как объявили его раньше.
Запрос для 550 пикселов мы добавим ниже, для того чтобы оба они применялись
к окнам шириной менее 551 пиксела.

www.trk.kg