Чим саме є адаптивний дизайн (він же реагує і чуйний, - responsive web-design) і як створити адаптивний веб-сайт? У цьому уроці пояснюється концепція, а так само докладно показаний процес створення шаблону адаптивного веб-сайту.
Адаптивний веб-дизайн є гарячою темою в наші дні, тим більше що сайти повинні адаптуватися до зростаючого числа мобільних пристроїв з їх відносно невеликими екранами. Багато дизайнерів і розробники хочуть створювати нові сайти з використанням шаблону, заснованого на швидкому реагуванні, або змінити існуючі сайти, щоб включити в них елементи швидкого реагування.
Проте, з першого погляду вся ця тема може викликати подив. Адаптивний дизайн є відносно новою ідеєю, яка швидко розвивається. У ній досить багато заплутаних термінів, таких як реагують шаблони, адаптивні шаблони, media queries і viewport'и. З чого почати?
У цій статті ви отримаєте коротке введення в світ адаптівнаго веб-дизайну. В ...:
Чи готові досліджувати світ адаптивного дизайну? Поїхали!
Адаптивний дизайн в двох словах
Основна ідея адаптивного веб-дизайну полягає в тому, що сайт повинен «реагувати» на пристрій, на якому його переглядають. У більш широкому плані це може означати наступне:
elated.com був призначений для роботи з вікнами браузера, які становлять близько 1000 пікселів в ширину.
При ширині вікна в 1600px з'являється багато невикористаного простору по обидва боки шаблону.
Реагує або адаптивний?
Приклад не адаптивного шаблону
Так, давайте застосуємо всю цю теорію до практики і побудуємо адаптивний шаблон. Ми почнемо з досить стандартного змінюється шаблону. Ось простенька HTML5-розмітка:
А ось файл CSS, main.css:
Цей шаблон досить простий. Він включає в себе:
- Хедер. #header. Смуга тягнеться всю ширину вікна.
- Контент. # Content. Ця область знаходиться зліва, і займає 65% від ширини вікна.
- Сайдбар (бічна колонка), # sidebar. Це область знаходиться праворуч від області основного змісту, і займає 20% від ширини вікна.
- Меню навігації. #nav. Воно так само знаходиться в правій частині сайту, а саме праворуч від бічній панелі. Воно займає 15% від ширини вікна.
- Футер. #footer. Як і в заголовку, ця смуга простягається через все вікно.
Ми також обернули контент, сайдбар і навігацію в #pageBody div, якому ми даємо максимальну ширину в 1200px, щоб запобігти занадто велике розтягнення вмісту сайту на дуже широких вікнах браузера.
Змініть розміру вікна браузера, щоб побачити, як змінюється шаблон в залежності від змін ширини видимої області.
У міру звуження видимої області всі елементи сторінки теж звужуються пропорційно. Все це прекрасно працює, поки ширина браузера не стає менше 1000px, після чого три колонки починають тіснити один одного. При подальшому звуженні вікна браузера, приблизно до 600px, колонки стають настільки стислими, що текст всередині стає нечитабельним.
Змінюється шаблон добре підходить для відносно широких вікон браузера.
Однак з вузькими вікнами змінюється шаблон перестає працювати правильно.
Як зробити шаблон адаптивним
Очевидно, що змінюється шаблон, як показано вище, не буде добре працювати на вузьких екранах мобільних пристроїв. У таких випадках слід застосовувати адаптивні шаблони.
Роблячи наш шаблон адаптивним, ми можемо змінити різні елементи сторінки в залежності від ширини видимої області. Для вікон браузера широкого робочого столу застосовуються стандартні три колонки, в той час як для вікон вузького браузера і мобільних браузерів застосовується оптимальний шаблон, який більше підходить для їх зменшеної ширини.
Розуміння media queries
Ключем до створення адаптивних шаблонів є стандарт CSS media queries. За допомогою media queries ви можете створити безліч наборів правил CSS, які застосовуються тільки коли видима область браузера знаходиться в рамках певної ширини або висоти, або в межах діапазону заданої ширини / висоти. Наприклад, при створенні media query для вікон, ширина яких менше 700 пікселів, можна застосувати набір призначених для користувача правил CSS, які автоматично підлаштовують елементи сторінки, коли сторінка виводиться на вузькі вікна браузера.
Media queries працюють майже у всіх сучасних браузерах, за винятком Internet Explorer 8 і його раніших версій.
Ось деякі media queries, які, швидше за все, доведеться використовувати при побудові адаптивних шаблонів:
min-width: width
Застосовується, якщо ширина вікна більше або дорівнює ширині шаблону
max-width: width
Застосовується, якщо ширина вікна менше або дорівнює ширині шаблону
min-device-width: width
Застосовується при ширині екрану пристрою більше або дорівнює ширині шаблону
max-device-width: width
Застосовується при ширині екрану пристрою менше або дорівнює ширині шаблону
Ви також можете вказати точні значення ширини, використовуючи властивості «width» і «device-width», хоча ви, швидше за все, будете використовувати варіанти мінімальної і максимальної ширини, які дозволяють задати діапазон значень.
Інша трудноуловимое відмінність в тому, що width (min-width / max-width) вимірюється в пікселях CSS, в той час як device-width (min-device-width / max-device-width) вимірюється в пікселях пристрою. Коли сторінка збільшена до 100% на мобільному пристрої, то 1 CSS піксель = 1 пікселю пристрою. Однак якщо масштаб сторінки зменшений, тоді 1 CSS піксель менше 1 пікселя пристрою. Подальший розвиток подій ускладнюється появою дисплеїв високої чіткості, таких як Retina Display від Apple, в якому піксель пристрою може фактично вміщати більше одного пікселя екрану! (Це робить життя веб-розробника легше, так як йому не потрібно більше турбуватися про те, чи буде дисплей пристрою нормальної або ж високої щільності).
Адаптація до вікон шириною в 1000-менш пікселів
- Перший набір правил розтягує ширину контенту з 65% до 75%.
- Другий набір правил ставить навігацію в верхню частину бічній панелі, встановлюючи ширину обох елементів дорівнює 25%.
- Третій набір правил видаляє праве поле зі змісту бічній панелі і додає замість цього верхнє поле, так, щоб вийшло деякий простір по вертикалі між навігацією і сайдбарі.
Ви можете подивитися, як це виглядає наочно. Верхній скріншот показує початковий гумовий шаблон при використанні вікна з шириною 800px; нижній скріншот показує адаптивний шаблон з тієї ж самої шириною.
Наш перший адаптивний шаблон по media query в дії. Ось початковий гумовий шаблон у вікні шириною 800px ...
... а ось адаптивний шаблон, також з шириною 800px. Зверніть увагу, що навігація переміщена в положення над бічною панеллю, створюючи більше місця для утримання.
Адаптація до вікон шириною в 700 або менше пікселів
У міру того, як вікно звужується до ширини в 700px навіть наші нові дві колонки починають виглядати стисло:
При ширині в 500 пікселів наші дві колонки адаптивного шаблону починають виглядати сплющено.
Щоб вирішити цю проблему, ми можемо використовувати інший media query для того, щоб переробити сторінку в одну колонку для таких вузьких розмірів вікон. Ось CSS:
Ці набори правил застосовуються в разі, коли сторінка проглядається в вікні шириною менше ніж або дорівнює 700 пікселям. Ось їх перелік:
- Розтягуємо контент на всю ширину вікна і видаляємо правий відступ
- Переміщаємо навігаційне меню над контентом і розтягує його на всю ширину вікна
- Володіємо навігаційні горизонтально, а не вертикально
- Переміщаємо сайдбар під контент і розтягуємо його на всю ширину вікна
Адаптація до viewports шириною в 480 або менше пікселів
Ці набори правил прибирають білий відступ навколо краю сторінки і зменшують інші білі відступи з 20 пікселів до 5 пікселів, за умови, коли ширина вікна зменшується до 480 або менше пікселів. Вони також злегка зменшують відступи на заголовок і навігаційні елементи.
Спробуйте цей шаблон в вашому браузері. Тепер він повинен добре виглядати при будь-якій ширині браузера, починаючи з 1600 пікселів і закінчуючи 320 пікселями.
демо
Зображення нижче показують шаблон, що переглядається на браузері шириною в 480 пікселів, до і після застосування останнього media query.
При ширині вікна в 480 пікселів, наш шаблон з одного колонкою втрачає багато цінного місця на екрані через ширини білого поля в 20 пікселів.
Прибираючи зовнішні відступи і зменшуючи внутрішні відступи до 5 пікселів, а також зменшуючи відступи на заголовок і навігацію, ми отримуємо більше місця для розміщення змісту.
Робота з мобільними пристроями: viewport meta tag
На iPhone наш адаптивний шаблон поводиться так, ніби ширина вікна трохи менше 1000 пікселів, а не 320 пікселів. Чому?
демо
Ви також можете точно контролювати ширину вікна, використовуючи значення, такі як width = 500 (для 500px) і width = device-width (для ширини екрану пристрою в вертикальному режимі). Залежно від типу вашого шаблону, сувора настройка ширини може краще вам підійти. Дивіться Safari Web Content Guide для отримання додаткової інформації.
У цій статті ви вивчили концепцію адаптивного веб-дизайну і випробували кілька способів створення адаптивного дизайну. Що ви дізналися:
- Основна ідея адаптивного веб-дизайну. створення сайтів, які легко пристосовуються до різних розмірів екранів і пристроїв.
- Важковловиме відмінність між термінами «адаптивний веб-дизайн» і «адаптивний веб-дизайн».
- Як конвертувати стандартний Резіноое шаблон в адаптивний шаблон. який адаптується до різних розмірів браузера.
- CSS media queries і їх роль в адаптивних шаблонах.
- Як встановити розмір вікна мобільного браузера за допомогою мета-тега viewport.