Сайт визитка - адаптируем для планшетов
Обратимся к PSD макету и посмотрим, при каких условиях страница сайта должна измениться. Первые преобразования происходят при просмотре на экранах планшетов в альбомном режиме, т.е. при разрешении порядка 900px (если мы ставим целью охватить наибольшее количество устройств). Однако, если постепенно начать уменьшать окно браузера (на настольном компьютере), то при его ширине в 1000px у нас появится горизонтальный скролл (некоторые элементы верстки имеют фиксированную ширину и не помещаются в размер окна). На планшете мы этого не увидим, но кто его знает, что нас ждет в будущем. Поэтому будем привязываться не к устройствам, а к разрешениям экранов, тем более, что дизайн сайта достаточно простой и есть возможность заставить страницу подстраиваться под любые размеры.
Для начала нам потребуется внести изменения в html файлы. Открываем в блокноте index.html и между тегами <head> </head> пропишем следующую строку:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1"/>
Этой строкой мы сообщаем мобильным устройствам, что наш сайт не нужно пытаться вписывать в размеры экрана. Теперь, если открыть главную страницу с помощью какого нибудь мобильного устройства, увидим, что она отображается как есть, т.е. в свою натуральную ширину, чего мы и хотели достичь. Для остальных страниц повторим выше описанные действия и переходим к файлу со стилями.
Открываем в блокноте файл style.css. Первой контрольной точкой у нас будет ширина окна в 1000px. Основные элементы, которые имеют фиксированный размер, при этой ширине должны поменять свои css свойства width на размер, указанный в процентах (превращаем макет в резиновый). Таких элементов у нас насчитывается 6 штук: .top_nav ul, .slider_pic, .center_wrap, .footer_wrap p, .center_colum и .center_colum p img.
Что бы достичь желаемого результата, в самом низу style.css пишем следующий код:
@media (max-width : 1000px) {
.top_nav ul {
width:100%;
}
.slider_pic {
width:95%;
}
.center_wrap, .footer_wrap p {
width:99%;
}
.center_colum {
width:42%;
}
.center_colum p img {
width:97%;
}
}
Остановимся подробнее на том, что же такого мы написали. С помощью медиа запроса @media (max-width : 1000px) {}, мы сообщаем браузерам, что при ширине экрана, равной 1000px нужно изменить значения width элементам, указанным в фигурных скобках. Обновим главную страницу сайта и попробуем уменьшить размеры экрана. Все блоки изменят свою ширину и подстроятся под текущий размер. Такое поведение будет соблюдаться вплоть до разрешения экрана 900px. Достигнув этой точки центральный блок уедет вниз из-за недостатка места. Именно этот размер мы будем использовать для второй точки, в которой наш сайт претерпит еще одно преобразование и примет вид, который будет соответствовать дизайну для планшетов в портретном режиме (исчезнет правый блок с рекламой).
@media (max-width : 900px) {
.slider_pic {
width:93%;
}
.center_colum {
width:65%;
}
.center_colum p img {
width:auto;
}
.right_colum {
display:none;
}
}
Из приведенных выше стилевых правил видно, что мы снова переопределяем ширину блока .slider_pic (иначе ближе к размеру экрана 786px будет появляться горизонтальный скролл). Далее убираем весь правый блок, а центральный растягиваем на освободившуюся ширину. Картинкам в тексте задаем ширину auto. Теперь сайт будет выглядеть одинаково на всех устройствах с разрешением экрана 768px и выше. Это разрешение является минимальным для большинства планшетов.
Задача выполнена. Контрольный пример качаем по ссылке ниже, или любуемся окончательным демо вариантом:
Далее сайт ожидает еще несколько преобразований, где он изменит свой внешний вид в соответствии с дизайном для мобильных устройств типа iPone.
