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

Изменение макета для просмотра на мобильных устройствах • 233

общает, что ширина устройства — 320 пикселов. Устройства iPad работают точно
так же — считается, что ширина устройства, независимо от ориентации, равна
768 пикселам. Еще сильнее это вводит в заблуждение, когда приходится работать
с iPhone 4, разрешение экрана которого составляет 640×960 пикселов, но которое
упорно сообщает о ширине устройства, равной 320 пикселам.
Это не означает, что характеристику device-width использовать нельзя или, по
крайней мере, не рекомендуется. Но, возможно, интуитивно понятнее и удобнее
для разработки окажутся min-width и max-width, а не min-device-width и max-
device-width. На мобильных устройствах они работают точно так же; основное
различие заключается в том, применяются ли они к не мобильным устройствам.
Например, медиазапрос с характеристикой max-width, равной 550 пикселам, при-
меняется как к мобильным устройствам с шириной экрана менее 551 пиксела, так
и к узким (менее 551 пиксела) окнам браузера на настольных устройствах. Однако
если используется характеристика max-device-width, также равная 550 пикселам,
то кроме как на мобильных устройствах она вряд ли где-либо сработает: не думаю,
что найдется так уж много настольных компьютеров с шириной экрана меньше
551 пиксела! Поэтому ни одну из характеристик нельзя назвать однозначно плохой
или хорошей — это просто разные варианты, и вы выбираете наиболее подходящий
для вашей ситуации.

третий медиазапроС
Итак, давайте добавим третий медиазапрос, предназначенный для окон шириной
до 550 пикселов:
@media screen and (max-width: 550px) {
}

Проверьте, что добавили этот запрос под вторым медиазапросом (предназначен-
ным для области просмотра шириной до 760 пикселов). Это важно, так как второй
медиазапрос также работает на мобильных устройствах — устройство с шириной
экрана 480 пикселов попадает в категорию «до 760 пикселов». Если поместить
медиазапрос для 550 пикселов выше запроса для 760 пикселов, то второй (для
760 пикселов) переопределит стили из первого (для 550 пикселов). Так работает
каскадный принцип CSS — более поздние правила переопределяют аналогичные
правила, объявленные выше.

полезные медиазапроСы для моБильных уСтройСтв

В нашем медиазапросе мы используем характеристику max-width: 550px, однако в зависи-
мости от того, какие устройства или пользовательские настройки вас интересуют, вы могли
бы использовать всевозможные альтернативные медиазапросы. Приведу несколько при-
меров, для того чтобы вы поняли принцип и смогли при необходимости сконструировать
собственный медиазапрос для того или иного проекта:

www.trk.kg