DEMETR Создание сайтов в Казани

Опубликовано

Адаптивная верстка для телефонов и планшетов

Адаптивная верстка iphone, ipad
В этой статье хочу поделиться мыслями и навыками о адаптивной верстке. Современные реалии таковы, что пользователи очень активно используют мобильные устройства. Времена Internet Explorer 6 уже пройдены, и теперь нужно подстраиваться под разные разрешения экранов устройств, которых появилось достаточно.

Что такое адаптивная верстка, думаю, понятно. Верстка, которая адаптируется под экран устройства, на котором просматривается. Пользователь загружает сайт с телефона, сайт адаптируется и выдает верстку предназначенную для телефонов, зашел с планшета — получает более продвинутую. Вся прелесть метода в том, что действия происходят только на уровне css.

Сам я недавно стал ее использовать, но пара проектов уже было сделано, так что кое чему научился.

Итак, у нас есть страница сверстанная для десктопов. Открываем файл стилей и начинаем колдовать.

Планшеты:

@media screen and (max-width: 960px) {
body{background:#000;}
}

В этом случае, при заходе на сайт с планшета вы увидите черный фон.
Помимо этого можно заморочиться с тем, чтобы показывать разную верстку для фронтального и портретного режима.

Фронтальный режим:

@media only screen and (orientation:landscape) {
body{color:#369;}
}

Портретный режим

@media only screen and (orientation:portrait) {
body{color:#c00;
}

Поверните планшет горизонтально (ландшафтный режим) и текст станет синим, перевод в вертикальное положение (портретный режим) сделаем текст красным.

Телефоны:

@media screen and (max-width: 650px) {
 html {
      -webkit-text-size-adjust: none;
      background:#369;
 }

Отключаем выравнивание текста по ширине. Фон сайта станет синим.

Необходимо помнить, что применять эти стили стоит строго сверху вниз. Если для планшетов мы уменьшили шрифт до 11px, то это же свойство применится и для телефонов.

После долгих тестов, в результате получается страница адаптированная под все устройства.

Адаптивная верстка для телефонов и планшетов: Один комментарий

  • Странник — 20.03.2014 в 12:22 #

    Спасибо вам уважаемый ! выручил очень !)