Як використовувати медіа запити css3 щоб створити версію вашого сайту для мобільних пристроїв

CSS3 продовжує одночасно захоплювати і розчаровувати веб дизайнерів і розробників. Захоплюють можливості, які надає CSS3, але розчаровує практично повна відсутність підтримки в Internet Explorer 8. У даній статті демонструється техніка використання CSS3, яка не підтримує в Internet Explorer 8. Однак, для тих, кому доводиться забезпечувати підтримку мобільних пристроїв (наприклад, iPhone або тих, які використовують Android) такий недолік буде байдужий.

У даній статті пояснюється, як за допомогою декількох правил CSS3 можна створити робочу версію сайту для iPhone. Буде представлений дуже простий приклад, а також демонстрація того, як додати стиль маленького екрану мобільного пристрою до вже існуючого сайту.

медіа запити

Якщо вам коли-небудь доводилося створювати стиль для друку сторінок веб сайту, то ви вже знайомі з ідеєю створення спеціальних таблиць стилів, які працюють в певних умовах (в даному випадку таблиця стилів використовується при друку сторінки). Такий функціонал був додана в CSS2 за допомогою типів носіїв. Типи носіїв дозволяють задавати цільової тип носія інформації, тобто можна визначити стилі для цілей print (друк), handheld (мобільний пристрій) і так далі. На жаль, типи носіїв ніколи не отримували широкої підтримки в пристроях, тому вони, за винятком типу носія print. дуже рідко використовуються.

Медіа запити в CSS3 підхоплюють цю ідею і розвивають її. Але на додаток до визначення типу пристрою вони дозволяють отримати відомості про його можливості. наприклад:

Щоб почати давайте розглянемо дуже простий приклад. Шаблон, представлений нижче - дуже простий і має всього дві колонки.

Простий шаблон з двома колонками.

Перший спосіб використання медіа запитів - створення альтернативної секції CSS прямо в тій же таблиці стилів. Так, щоб визначити метою маленькі пристрої, можна використовувати наступний синтаксис:

Потім можна додати альтернативні правила CSS для маленького екрану в секцію, обмежену фігурними дужками. Таким чином ми просто переобумовленої будь-які правила, встановлені для звичайних браузерів раніше в нашій CSS таблиці. Так як дана секція розташовується останньої в файлі CSS, то вона змінює попередні правила. Таким чином, для лінеаризації шаблону і зменшення секції заголовка потрібно додати наступні рядки:

У наведеному коді використовується альтернативне фонове зображення і зменшується висота і ширина заголовка, потім встановлюються опції для контенту і навігації float: none; і змінюється установка ширини, яка визначалася раніше в таблиці стилів. Дані правила діють тільки для пристроїв з маленьким розміром екрану.

Вид прикладу на екрані iPhone.

Приєднання окремої таблиці стилів з використанням медіа запитів

Вставка специфічного коду для мобільних пристроїв в основну таблицю стилів може бути хорошим рішенням у випадках, коли потрібно зробити невеликі зміни. Однак, якщо таблиця стилів містить велику кількість властивостей, які потрібно змінити для виведення вмісту на маленький екран, краще зробити окремий файл CSS для таких правил і приєднувати його до сторінки сайту після основної таблиці стилів.

Приєднання таблиці стилів для мобільних пристроїв:

Testing media queries

Сайт dConstruct, представлений сервісом ProtoFluid про людське око на iPhone.

Можна також ввести розмір вікна, якщо потрібно перевірити відображення сайту на певному пристрої з відомим розміром екрану.

Для використання ProtoFluid вам потрібно трохи змінити медіа запит, який ми використовували раніше, щоб додати опцію max-width. Це буде означати, що медіа запит буде діяти в тому випадку, якщо користувач використовує звичайний браузер, але в дуже маленькому вікні.

Тепер все готово, щоб використовувати ProtoFluid. Основна перевага ProtoFluid полягає в тому, що можна використовувати інструменти розробника. такі як FireBug, для настройки дизайну, що досить важко на iPhone. Звичайно, ви можете пробувати ваш сайт на різних пристроях, але ProtoFluid робить процес розробки і тестування значно простіше.

Якщо вам не потрібно, щоб шаблон сайту змінювався, коли хто-небудь зменшує розмір вікна браузера, вам потрібно просто видалити частину max-width запиту перед тим, як відкрити доступ до сайту. Таким чином тільки ті, хто дивиться сайт з маленького пристрою, будуть бачити змінений варіант оформлення сторінок.

Налаштування існуючого сайту

Вище використовуваний приклад дуже простий. Він призначений для демонстрації техніки. Однак її можна легко використовувати для існуючого сайту, щоб зробити версію для маленьких екранів. Однією з переваг використання CSS для шаблону є можливість забезпечувати альтернативний варіант для готового дизайну. Для демонстрації буде використовуватися реальний веб сайт для якого буде використана описувана техніка.

шаблон сторінок

Розглянутий сайт використовує шаблон фіксованої ширини з трьома колонками. Дизайн був розроблений пару років назад і медіа запити тоді не бралися до уваги під час розробки.

Додавання нового файлу стилів

Щоб зробити линеаризацию сайту потрібно провести багато змін, таким чином, потрібно додати новий файл з таблицею стилів після основного і з умовою використання тільки при значенні max-width менше 480 px.

Для створення нового файлу з таблицею стилів беремо основний файл сайту і зберігаємо його як small-device.css. Таким чином, він починає жити як копія основного фала з таблицею стилів. Далі в ньому треба переписати кілька правил і видалити все непотрібне.

стиснення заголовка

Спочатку підганяємо розмір логотипу так, щоб він виглядав добре на маленьких екранах. Просто завантажуємо інше зображення. Також потрібно зменшити фон для області, в якій виводиться логотип.

Лінеарізуем шаблон

Далі потрібно линеаризовать шаблон і зробити одну колонку. Шаблон створений з використанням плаваючих блоків, тому треба знайти всі правила, які роблять колонки плаваючими і встановити для них властивості float: none і width: auto. Таким чином всі колонки вишикуються одна під інший.

"Причісувати"

Тепер подивимося на шаблон в ProtoFluid і точно налаштуємо розміри полів і відступів для різних областей, які будуть відрізнятися від того, що встановлено для звичайного шаблону. З використанням Firebug для ProtoFluid така робота виконується швидко і легко, а вийшов набір правил CSS потім копіюється в таблицю стилів.

Перевіряємо сайт в ProtoFluid.

Перевірка сайту на iPhone

Після додавання тега meta сайт став виводитися як було задумано - в одну колонку:

Вид сайту на екрані iPhone.

Проста модифікація сайту дозволяє зробити легко ваш ресурс доступним для користувачів мобільних пристроїв.

висновок

Використанням медіа запитів може ввести CSS3 в вашу повсякденну діяльність. Варто пам'ятати про те, що браузери, які підтримують медіа запити, також підтримують всі інші властивості CSS3. Таким чином можна використовувати всі можливості CSS3, коли користувач використовує iPhone або інший мобільний пристрій.

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!