- Що таке адаптивний веб-дизайн?
- Трохи теорії (Основи)
- Практика
- Як перевірити?
- CSS
- Використання @media screen
- 1024px
- 768px
- Важливо!
- висновок
Привіт, дорогі читачі блогу. Сьогодні я з Вам хотів би поговорити про основи адаптивного дизайну (responsive), а так само розкласти по поличках один із прикладів, який я підготував.
Іншими словами ми сьогодні дізнаємося що таке адаптивний веб-дизайн, і в загальному як його використовувати або ж зробити. Хочеться сказати відразу, що повністю я його описувати не буду, а торкнуся так сказати найголовніше. Пост буде розрахований на новачка. Таким чином я постараюся Вас не запитати.
І так, поїхали.
Що таке адаптивний веб-дизайн?
Ви, напевно, не раз заходили на який-небудь сайт зі свого мобільного пристрою, і напевно Вам доводилося збільшувати веб сторінку, щоб можна було прочитати цей невеликий текст, який ще й на додачу повністю не поміщається на екрані мобільного пристрою. Таким чином доводиться прокручувати вліво або вправо веб сторінку, що в свою чергу завдає деяку незручність. А ось якщо Ви зайшли на сайт з адаптивним веб - дизайном, то тут картина повністю змінюється. Вам взагалі не потрібно робити ніяких «тіло рухів» все дуже зручно і зрозуміло читається.
Іншими словами адаптивний дизайн відповідає за правильне відображення сайту на мобільних пристроях. Він так би мовити, підлаштовує сайт під дозвіл мобільного девайса.
Трохи теорії (Основи)
Як відомо, що весь веб дизайн більшу частину будується на CSS, в CSS задається практично всі правила відображення сайту в різних браузерах. Відповідно і адаптивний веб - дизайн не виняток. Найголовніше це стандартне правило media queries, в яких і задаються все нові класи під бажане дозвіл екрана. Але і звичайно ж стандартна CSS верстка не багато змінилася. Найбільше зміна це використання відсотків а не пікселів в ширині об'єктів.
Наприклад: Розмір блоку головного контенту на сторінці дорівнював 600px, а ширина блоку сайдбара 400px. В адаптивному дизайні дані значення потрібно прописувати в процентах. Виходячи з цього у нас вийде ширина контенту 60%, а ширина сайдбара 40% Сподіваюся, що суть Ви уловили.
Так само в стилях будуть використовуватися нові властивості, які не використовувалися при фіксованому шаблоні. Ось вони:
max-width і width: якщо ширина сайту дорівнює width: 1000px то при зменшенні вікна браузера буде з'являтися горизонтальна смуга прокрутки, іншими словами сайт просто не буде влазити в вікно. І його доведеться горизонтально прокручувати щоб побачити весь сайт. Але якщо ми поставимо width: 100% Сайт розтягнеться на всю ширину монітора. На малих дозволах такий спосіб буде виглядати нормально, а ось на моніторах з великим дозволом сайт дуже сильно розтягнеться і буде зовсім не читабельним. Таким чином якщо Ви хочете щоб сайт залишився шириною в 1000px, але до того ж щоб не з'являлася горизонтальна смуга прокрутки, потрібно застосувати max-width.
Ось що у нас було:
width: 1000px
А ось що стало
width: 100%; max-width: 1000px;
Тепер наш блок стане гумовим, який буде такого розміру як і вікно браузера, але якщо ширина досягне в 1000 пікселів блок перестане розтягуватися.
min-width і width: Тут абсолютно все навпаки, якщо в першому випадку ми позбавлялися від горизонтальної смуги прокрутки, то тут ми її повертаємо. Іншими словами, якщо гумовий блок шириною в 100% при зменшенні дозволу буде підлаштовуватися під вікно браузера, чим менше вікно тим і менше сам блок. min-width може встановити значення ширини блоку після якого він перестане зменшуватися. Наприклад, якщо встановити min-width: 200px; то блок при досягненні даної ширини перестане зменшуватися, таким чином буде з'являтися горизонтальна смуга прокрутки у вікні браузера.
Практика
Виходячи з вищенаведеної теорії я підготував найпростіший шаблон, який показує суть адаптивного веб дизайну.
Даний шаблон складається з трьох блоків - це шапка сайту, основний текст і сайдбар. Таким чином у мене вийшли блоки до яких я присвоїв відповідні ID CSS:
Шапка сайту - #headerInner
Головний контент - #colLeft
Сайдбар - #colRight
Як перевірити?
Щоб перевірити працездатність даного шаблону, просто поізменяйте курсором розмір вікна браузера і все спрацює, або ж скористайтеся сервісами для перевірки адаптивного дизайну.
Ну а зараз давайте подивимося і розмітку html, вона досить проста:
<! DOCTYPE html> </ pre> <div id = "headerInner"> <div class = "logo"> <a href="http://beloweb.ru"> Логотип </a> </ div> </ div> <pre> <! - початок врапер -> </ pre> <div id = "wrapper"> <div id = "middle"> <div id = "content"> <div id = "colLeft"> <div class = "text"> <h1> Основний контент </ h1> Зміст головного контенту </ div> </ div> <! - Кінець коллефт -> <! - початок колрайт -> <div id = "colRight"> <div class = "text"> <h1> Текст сайдбара </ h1> Зміст сайдбара </ div> </ div> <! - Кінець колрайт -> </ div> <! - Кінець контент -> </ div> <! - Кінець мідл -> </ div> <pre> <! - Кінець врапер ->
А ось стилі даного шаблону:
CSS
* {Margin: 0; padding: 0; } Body {width: 100%; height: 100%; color: # 333; background: url (images / body.png) 0px 0px repeat; font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.94em; line-height: 135%; } H1 {font-size: 30px; font-weight: normal; padding: 0px 0 0px; line-height: 100%; font-style: italic; } A {color: # cd5252; text-decoration: none; } A: hover {color: # 963c3c; text-decoration: none; } / * ------------------------------- Структура --------------- ------------------- * / / * --------------------------- ---- Ширина сайту в 1000px ---------------------------------- * / #wrapper {margin-top : 40px; border: 0px solid # 000; width: 100%; max-width: 1000px; margin: 0 auto; height: auto! important; } /* ------------------------------- Шапка сайту -------------- -------------------- * / #headerInner {border: 0px solid # 000; background: # d04942; position: relative; width: 100%; max-width: 1000px; height: 100px; margin: 0 auto; margin-top: 0px; } .Text {margin: 15px; } / * ------------------------------- Головний контент -------------- -------------------- * / #content #colLeft {border: 0px solid # 000; float: left; width: 67%; margin-right: 0px; background: # 85c9cf; } / * ------------------------------- Сайдбар сайту -------------- -------------------- * / #content #colRight {position: relative; margin-left: 30px; float: left; width: 30%; border: 0px solid # 1FA2E1; background: # 7a9e0e; } #Middle: after {content: '.'; display: block; clear: both; visibility: hidden; height: 0; } / * ---------------------------- Логотип ------------------ ------------ * / .logo {position: absolute; left: 0px; top: 40px; } .Logo a {margin-left: 30px; font-size: 30px; color: # 96b551; }
Як Ви помітили, що ширина сайту дорівнює в 1000px і використовується width і max-width: про які я писав вище.
Шапка сайту так само маєте ширину в 1000 пікселів. Головний контент #colLeft має ширину в 67%, права колонка width: 30%; і відступ між ними margin-left: 30px; далі цей відступ ми будемо задавати у відсотках.
Використання @media screen
Тепер найцікавіше. Зараз будемо використовувати @media screen основу адаптивного дизайну.
Але для початку хочеться сказати, що в @media screen задаються бажані дозволу пристроїв. Їх існує безліч, ось найпопулярніші: 320px, 480px, 600px, 768px, 900px, 1200px. У нашому прикладі ми будемо використовувати тільки два дозволи, це 1024px і 768px. Таким чином якщо дозвіл пристрою менше ніж 1024px будуть задаватися властивості, які задані в @media screen. Так само і з дозволом 768px.
Ось як виглядає правило @media screen в стилях CSS:
@media screen and (min-width: 200px) and (max-width: 1024px) {}
Як бачите, що ми задали max-width: 1024px, дане значення говорить браузеру з якого дозволу застосовувати правило. А min-width: 200px не дасть звузити сильно сайт. Між цими дужками {} ми пишемо нові властивості класів, які задали в стилях для шаблону.
1024px
Наприклад я хочу небагато звузити весь сайт при заданому дозволі, але основний текст і сайдбар залишаються на місці.
Ось що я прописую в стилях:
@media screen and (min-width: 100px) and (max-width: 1024px) {/ * розмір блоку де знаходяться головний контент і сайдбар * / body #wrapper {margin-top: 40px; width: 90%; margin: 0 auto; } / * Розмір шапки сайту * / body #headerInner {width: 90%; margin: 0 auto; } / * Розмір головного контенту * / #wrapper #content #colLeft {width: 67%; } / * Розмір сайдбара * / #wrapper #content #colRight {margin-left: 3%; width: 30%; }}
Шапці сайту #headerInner заданий новий розмір в 90%, так само прибраний max-width: він тут не потрібен. #wrapper - це блок в якому знаходяться контент і сайдбар, його ширина теж 90% як і у шапки сайту. Ширина сайдбара і контенту залишилися незмінними тільки змінився відступ у сайдбара в 3%. Це потрібно для того щоб при зменшенні розміру вікна сайдбар не виїжджав вниз.
768px
Тепер задаємо стилі для дозволу від 768px і менше. Зараз нам потрібно перемістити сайдбар під основний текст, так як якщо його залишити праворуч, буде взагалі не красиво і нечитаності на маленьких дозволах. Ось що потрібно прописати в стилях:
@media screen and (min-width: 100px) and (max-width: 768px) {#wrapper #colLeft {float: none; width: 100%; margin-right: 0px; } #Wrapper #colRight {margin-left: 0px; margin-top: 25px; float: none; width: 100%; }}
Для головного контенту #colLeft ми задали ширину в 100%, для того щоб він розтягнувся на весь екран, також прибрав вирівнювання по лівому краю float: none, для того щоб сайдбар #colRight з'їхав під основний текст.
Для сайдбара, теж поставив ширину в 100% і прибрав вирівнювання. А так же зробив відступ зверху, щоб він трохи відокремлювався від контенту margin-top: 25px;
Ось що у мене вийшло:
Важливо!
Оновлене 1,08,2013
Величезне спасибі Олександру, який вказав на помилку. Шлях годі й прописувати і без них все відмінно працює. Моя помилка була в тому, що правила в CSS я ставив вище основних правил у файлі CSS. Задавайте правила адаптивного дизайну в самому кінці стилів CSS і буде все відмінно працювати.
1. Я помітив одну особливість. Коли задаються правила до стилям в @media screen до класів, до них потрібно прописувати якийсь шлях. Наприклад клас #headerInner взагалі не працює без стандартного класу body. Якщо написати просто #headerInner і задати до нього правила, то браузер чомусь не застосовує ці правила, а ось якщо написати body #headerInner то починає все працювати. Так само і для всіх інших класів. Якщо клас # 3 знаходиться в класі # 2 то потрібно прописувати # 2 # 3 інакше правила працювати не будуть.
2. Якщо Ви зібралися робити шаблон з адаптивним дизайном, обов'язково між тегами <head> і </ head> додайте ось цей мета тег:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
3. Так само додайте ось цей код в стилі CSS для картинок:
img {max-width: 100%; height: auto; width: auto \ 9; / * Ie8 * /}
І картинки будуть автоматично розтягуватися і звужуватися.
висновок
Друзі, це абсолютно не складно як здається на перший погляд. Тільки не багато потрібно посидіти і розібратися як це працює. По-друге адаптивний дизайн дуже сильно спрощує користування сайтом на всіх мобільних пристроях. Як Вам відомо, що зараз дуже стали популярними дані гаджети. Так що я б не радив Вам пропускати цей крок. Вчіться.
Наприклад я практично без проблем для свого шаблону на блозі http://beloweb.ru/ зробив доступним для мобільних пристроїв, адаптивним. До речі можете перевірити :-)
Так само у даного дизайну є величезні можливості, сайт можна переробити до невпізнання. Але не перестарайтеся, головне зручність.
Друзі, якщо Вам буде щось не зрозуміло або що-небудь не буде виходити, обов'язково пишіть в коментарях. До зустрічі.
Що таке адаптивний веб-дизайн?Що таке адаптивний веб-дизайн?