Главная > Образование и Изучение, Руководства > Мобильный дизайн с помощью CSS3 Media Queries

Мобильный дизайн с помощью CSS3 Media Queries


30 июня 2011, 13:40. Разместил: Mysterious Master
На сегодняшний день разрешение экрана устройств варьируется от 320 пикселей (iPhone) до 2560 пикселей (большой настольный монитор) или даже больше. Теперь пользователи просматривают веб-сайты не только сидя дома за компьютером. Сегодня для этого используются мобильные телефоны, маленькие нетбуки, планшеты типа iPad или Playbook. Это привело к невозможности установки фиксированной ширины шаблона веб-сайтов. Дизайн должен иметь возможность адаптироваться. Шаблон должен автоматически подстраиваться под все разрешения и устройства. Эта обучающая статья расскажет вам о разработке кросс-браузерного адаптивного дизайна, где мы воспользуемся HTML5 + media queries в CSS3.

Посмотреть демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


Ознакомление

Перед началом работы давайте сначала ознакомимся с принципом работы шаблона. Измените размер окна вашего браузера, и вы увидите, как сайт также автоматически изменяется в размере.

Мобильный дизайн с помощью CSS3 Media Queries

Больше примеров

Если вам нужно больше примеров, ознакомьтесь со следующими шаблонами WordPress, которые также были разработаны при помощи media queries: iTheme2, Funki, Minblr и Wumblr.

Обзор

Само содержание страницы спрятано в контейнер шириной в 980 пикселей – оно является самым оптимальным для любого разрешения выше 1024 пикселей. Media Query используется для проверки, не использует ли посетитель разрешение ниже заданного, и если да, то шаблон автоматически превращается в резиновый. Если окно просмотра уже заданного, например ниже 650 пикселей, то шаблон расширяет основной блок и боковую панель на максимальную ширину, превращаясь в колонну.

Мобильный дизайн с помощью CSS3 Media Queries

HTML-код

Мы не будем подробно описывать код HTML. Ниже мы привели основную структуру разметки. Здесь имеется контейнер «pagewrap», который охватывает все элементы вместе: header, content, sidebar и footer.

<div id="pagewrap">

    <header id="header">

        <hgroup>
            <h1 id="site-logo">Demo</h1>
            <h2 id="site-description">Site Description</h2>
        </hgroup>

        <nav>
            <ul id="main-nav">
                <li><a href="#">Home</a></li>
            </ul>
        </nav>

        <form id="searchform">
            <input type="search">
        </form>

    </header>
    
    <div id="content">

        <article class="post">
            blog post
        </article>

    </div>
    
    <aside id="sidebar">

        <section class="widget">
             widget
        </section>
                        
    </aside>

    <footer id="footer">
        footer
    </footer>
    
</div>

HTML5.js

Учтите, что в демо мы используем вёрстку на HTML5. Internet Explorer версией ниже 9-ой вряд ли будет поддерживать предложенные в HTML5 элементы типа «header», «article», «footer», «figure» и так далее. Включив в код javascript-файл html5.js, мы сделаем так, чтобы IE начал распознавать новые элементы.

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS-код

Сбрасываем HTML5-элементы к блочным

Следующий код CSS сбросит параметры HTML5-элементов (article, aside, figure, header, footer и так далее), и сделает их блочными.

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

Основная структура CSS-кода

Опять же, мы не будем вдаваться в подробности. Основной контейнер "pagewrap" имеет ширину в 980 пикселей. У шапки фиксированная высота в 160 пикселей. Контейнер "content" выровнен по левой стороне и имеет ширину в 600 пикселей. Элемент "sidebar" выровнен по правой стороне и имеет ширину в 280 пикселей.

#pagewrap {
    width: 980px;
    margin: 0 auto;
}

#header {
    height: 160px;
}

#content {
    width: 600px;
    float: left;
}

#sidebar {
    width: 280px;
    float: right;
}

#footer {
    clear: both;
}

Этап 1 - Демо

Вот демо-версия нашего дизайна. Учтите, что здесь мы ещё не внедрили media queries. Измените размер браузера, и вы увидите, что элементы не изменяются в размерах.

Внедрение CSS Media Query

Здесь начинается веселье – media queries!

Внедрение javascript Media Queries

Internet Explorer версии 8 и раньше не поддерживает media queries в CSS. Вы можете подключить поддержку путем интеграции javascript-файла css3-mediaqueries.js.

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Внедрение CSS-кода для Media Queries

Создаём новую таблицу стилей для media query.

<link href="media-queries.css" rel="stylesheet" type="text/css">

Создание резинового шаблона для адаптации к разрешению меньшему, чем 980 пикселей

Если видимая область страницы уже 980 пикселей, то будет применено следующее правило:

pagewrap = сброс ширины до 95%
content = сброс ширины до 60%
sidebar = сброс ширины до 30%

Подсказка: используйте процентные значения для того, чтобы контейнеры были резиновыми.

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

    #pagewrap {
        width: 95%;
    }

    #content {
        width: 60%;
        padding: 3% 4%;
    }

    #sidebar {
        width: 30%;
    }
    #sidebar .widget {
        padding: 8% 7%;
        margin-bottom: 10px;
    }

}

Создание резинового шаблона для адаптации к разрешению меньшему, чем 650 пикселей (шаблон в одну колонку)

Далее у нас есть следующий код CSS для случаев, когда видимая область браузера уже 650 пикселей:

header = сброс высоты до auto
searchform = перемещение формы поиска на 5 пикселей вверх
main-nav = сброс расположения до статического
site-logo = сброс расположения до статического
site-description = сброс расположения до статического
content = сброс ширины до auto (это сделает так, чтобы шаблон растягивался по максимуму), избавление от выравнивания
sidebar = сброс ширины до 100% и избавление от выравнивания

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

    #header {
        height: auto;
    }

    #searchform {
        position: absolute;
        top: 5px;
        right: 0;
    }

    #main-nav {
        position: static;
    }

    #site-logo {
        margin: 15px 100px 5px 0;
        position: static;
    }

    #site-description {
        margin: 0 0 15px;
        position: static;
    }

    #content {
        width: auto;
        float: none;
        margin: 20px 0;
    }

    #sidebar {
        width: 100%;
        float: none;
        margin: 0;
    }

}

Адаптация к разрешению меньшему, чем 480 пикселей

Следующий код CSS применим в случаях, когда видимая область уже 480 пикселей (ширина экрана iPhone при горизонтальном положении).

Html = отключение возможности изменения размера текста. По умолчанию iPhone увеличивает размер так, чтобы его было удобнее читать. Вы можете отключить эту функцию, добавив -webkit-text-size-adjust: none;
main-nav = сброс размера текста на 90%.

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

    html {
        -webkit-text-size-adjust: none;
    }

    #main-nav a {
        font-size: 90%;
        padding: 10px 8px;
    }

}

Резиновые изображения

Для того чтобы сделать изображения резиновыми, просто добавьте max-width:100% и height:auto – это будет работаеть в IE7, но не будет работать в 8-й версии (ага, ещё один баг в браузере IE). Для исправления вам нужно добавить width:auto\9.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Резиновые встроенные видео-ролики

Для того чтобы сделать видео-ролики резиновыми, вам нужно применить тот же трюк, приведенный выше. По непонятным причинам, max-width:100% (для элемента embed) не работает в Safari. Для исправления, нужно просто добавить width:100% вместо max-width.

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

Основной мета-тэг масштабирования (iPhone)

По умолчанию, Safari в iPhone обрезает страницы HTML для того, чтобы они влезли в видимую область браузера. Следующий мета-тэг будет сообщать Safari, чтобы тот использовал ширину устройства в качестве ширины видимой области, и отключал основную функцию масштабирования.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Завершение

Ознакомьтесь с финальным демо и попробуйте изменить размер окна браузера, чтобы увидеть media query в действии. Не забудьте также проверить демо посредством iPhone, iPad, Blackberry (желательно использовать более свежие продукты), а также мобильных телефонов на базе Android, чтобы увидеть мобильную версию в демо.

Мобильный дизайн с помощью CSS3 Media Queries

Итого

* Откат с помощью javascript Media Queries:
Для включения поддержки у браузеров, не поддерживающих media query, нужен файл css3-mediaqueries.js.

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

* Media Queries на CSS:
Трюк для создания адаптивного дизайна заключается в том, чтобы, посредством CSS, переписать структуры шаблона.

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

    #content {
        width: auto;
        float: none;
    }

    #sidebar {
        width: 100%;
        float: none;
    }

}

* Резиновые изображения:
Используйте max-width:100% и height:auto для того, чтобы сделать изображения резиновыми.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

* Резиновые встроенные видео-ролики:
Используйте width:100% and height:auto для того, чтобы сделать видео-ролики резиновыми.

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

* Масштабирование текста для WebKit:
Используйте -webkit-text-size-adjust:none для того, чтобы отключить масштабирование текста в iPhone.

html {
    -webkit-text-size-adjust: none;
}

* Сброс встроенной функции масштабирования в iPhone:
Последующий мета-тэг сбрасывает параметры видимой области и встроенной функции масштабирования в iPhone:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Вернуться назад