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

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

крываться. Если в пользовательских настройках выбран большой размер текста, то
один элемент наползет на другой еще раньше.
Для того чтобы снизить вероятность наложения элементов, уменьшите ширину тек-
стового поля в форме поиска, добавив следующее правило к третьему медиазапросу:
#form-search input[type=text] { width: 100px; }

Теперь под медиазапросом для 550 пикселов добавьте четвертый медиазапрос,
предназначенный для окон шириной менее 401 пиксела:

@media screen and (max-width: 400px) {
}

Добавьте в этот медиазапрос правило, делающее метку формы поиска элементом
уровня блока, — так она будет выводиться на одну строку выше текстового поля:
@media screen and (max-width: 400px) {
#form-search label { display: block; }
}

Теперь форма поиска занимает меньше места как на экране шириной 550 пикселов,
так и на экране шириной 400 пикселов, и даже на экранах мобильных телефонов
шириной 320 пикселов она вряд ли наползет на логотип (рис. 6.20).

Рис. 6.20. Мы сделали форму поиска уже, чтобы она не перекрывала логотип
на экранах мобильных устройств шириной 480 пикселов (слева)
или даже 320 пикселов (справа)

улучшение предСтавления на экранах С выСоким разрешением
На устройствах iPhone 4 используется новый тип дисплея — ретиновый дисплей
(retina display), обладающий более высоким разрешением, чем экраны предыдущих
версий iPhone и iPod Touch. Разрешение этого дисплея 640×960 пикселов, однако
отображается на нем область такого же размера, что и на старых устройствах iPhone,
потому что для воспроизведения каждого пиксела CSS используется два пиксела
устройства. Удвоение пикселов определяет высокое разрешение экрана устройства,
но ширина устройства при этом все равно остается равной 320 (половина от 640).
Чаще всего для всех версий iPhone достаточно бывает одного набора стилей, од-
нако в некоторых случаях можно воспользоваться преимуществами ретинового
дисплея и добавить в версию страницы для iPhone 4 изображения с более высоким

www.trk.kg