—»     —»   Мобильный дизайн с помощью CSS3 Media Queries
  Раздел: Образование и Изучение, Руководства   Комментариев: 6  

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



На сегодняшний день разрешение экрана устройств варьируется от 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">
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, Media Query, iPhone, HTML 5
Опубликовал Mysterious Master   Прочитано (раз): 15319   |   Оставлено комментариев: 6
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 июля 2011 @ 11:27
Написал: Вячеслав — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отличная статья, спасибо.
Комментарий #2: 2 июля 2011 @ 13:04
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Вячеслав, пожалуйста!
Комментарий #3: 6 июля 2011 @ 10:46
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
wink Ну надо же! В тему! Как раз столкнулся с этой задачей на днях! Спасибо за статью.


--------------------
я дизайнер - http://imdesigner.ru
Комментарий #4: 6 июля 2011 @ 11:18
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
fortune, пожалуйста, рады помочь ..
Комментарий #5: 24 ноября 2011 @ 17:30
Написал: Dmitry — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Скачал пример по ссылке http://ruseller.com/lessons/les1177/demo.zip
В ИЕ7,8 локально не работает даже с хваленым css3-mediaqueries.js.
Но пример с http://ruseller.com/lessons/les1177/demo.html в ие7 и 8 работает....
В чем может быть причина?

Скачал с Вашего сайта тоже не работает в ие7 и 8.... Пожалуйста объясните как все таки заставить работать в ие 7 и 8?
Комментарий #6: 12 декабря 2011 @ 13:03
Написал: sipay — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
у меня тоже не работает в ИЕ:( хотя сделал 1 к 1
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Купить майнкрафт лицензию
С полным доступом. Премиум аккаунт майнкрафт по минимальной цене. Выгодно
steamplay.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31