Media queries CSS як АДАПТУВАТИ сайт

Медіа запит складається
типи носія
Логічні оператори
Логічні оператори:
Описуємо основну структуру в HTML і CSS
Потім визначимо для них стилі
Підключаємо CSS media queris
Розмір екрану менше 992px
Розмір екрану менше 768px
Розмір екрану менше 480px
Підключаємо Media Queries Javascript

CSS3 Медіа-запити (Media queries CSS), дозволяють реалізувати як адаптивний веб-дизайн так і всякого роду оформлення. В даному матеріалі по свешеннимі Media queries ми реалізуємо приклад як робляться адаптивні сайти.

See the Pen aVRZxO by Denis ( @Dwstroy ) on CodePen .

З відео ви дізнаєтеся:

що таке Media queries і його складові елементи;
як формується медіа запити;
розглянемо практично приклад адаптивного дизайну сайту.

Медіа запит складається

@media screen and (max-width: 480px) {h1 {font-size: 25px; }}

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

типи носія

В се запити починаються з правила @madia, далі йде умова, в якому пишемо тип носія (screen), він дозволяє отримати точну інформацію, на якому пристрої відкрита дана сторінка. Крім цього типу є й інші носії як print, all і speech.

Типи носіїв включають в себе

all - Підходить для всіх видів пристроїв. Це значення використовується за умовчанням.
print - Перегляд на екрані сторінок в режимі попереднього перегляду друку.
screen - Перегляд на екрані кольорових комп'ютерних моніторах.
speech - Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери.

У CSS2.1 були кілька додаткових типів, але вони прийняті застарілими і в Media Queries 4 не задіяні.

Застарілі типи носіїв:

braille - Пристрої, засновані на системі Брайля, які призначені для читання сліпими людьми.
embossed - Принтери, що використовують для друку систему Брайля.
handheld - Смартфони і аналогічні їм апарати.
projection - проектори.
tty - Пристрої з фіксованим розміром символів (телетайпи, термінали, пристрої з обмеженнями дисплея).
tv - Телевізори.

Більшою мірою використовуються два типи носіїв print і screen, так як вони включають в себе будь-який пристрій для відображення на екрані, і найголовніше підтримуються більшістю браузерів.

Логічні оператори

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

Наприклад, and, еквівалентно «І», і в цьому випадку якщо одна з умов буде не істиною означати і весь вираз, є брехнею.

Наступний оператор «запита», яка еквівалентна «АБО», і в даному випадку якщо одна з умов вірне, значить вираз є істиною.

Оператор not заперечення, а only дозволяє приховати стиль від всіх браузерах, які не підтримують цю умову.

Логічні оператори:

and - Пов'язує один з одним різні умови (еквівалентно «і»);
not - Дозволяє спрацювати медіа запитом в протилежному випадку (еквівалентно «заперечення»);
only - Приховує стилі для браузера, які не підтримують дані умови;
, - Кома працює по аналої з логічним оператором or (еквівалентно «або»);

Умова медіа запиту

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

Найпоширеніші умови це максимальна і мінімальна ширина max-width min-widt

Прописавши (max-width: 480px), сам стиль в нутрії дужок буде застосований в тому випадку, коли ширина екрану менше 480 пікселів.

Саме на таких прикладах базується адаптивна верстка, коли нам потрібно застосувати стилі під певні розширення екрани мобільного пристрою і все це робиться через CSS (media queries).

width min-width max-width - ширина;
height min-height max-height - висота;
device-width min-device-width max-device-width - ширина на пристрої;
device-height min-device-height max-device-height orientation - висота на пристрої;
aspect-ratio min-aspect-ratio max-aspect-ratio - співвідношення сторін;
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio - співвідношення сторін на пристрої;
resolution min-resolution max-resolution - дозвіл екрана (кількість пікселів);
color min-color max-color - кількість біт на кожні з кольорових компонентів пристрою виведення;
color-index min-color-index max-color-index - кількість записів в таблиці подставнокі квітів;
monochrome min-monochrome max-monochrome - кількість бітів на піксель монохромного пристрої;
scan grid - сітка сканування;

Описуємо основну структуру в HTML і CSS

Тепер розглянемо, як це виглядає в дійсності на прикладі створення простенького каркаса сайту.

Створюємо п'ять блоків, шапка сайту header, верхнє меню top_menu, лівий сайт бар sideLeft, область для контенту content і підвал footer.

Потім визначимо для них стилі

Для header призначимо свій колір, вкажемо ширину в 100%, висоту в 200 пік. і закруглити кути.

.header {background: # aefff7; width: 100%; height: 200px; border-radius: 5px; }

Верхньому меню призначимо, свій колір, ширину в 100%, зробимо відступ зверху в 5 пік., Висоту в 50 пік.

.top_menu {background: # 87c5ff; width: 100%; margin-top: 5px; height: 50px; }

Сайт бару, прописуємо свої стилі і пригорнемо його до лівого краю:

.sideLeft {background: # 81ffb6; width: 30%; height: 354px; margin-top: 5px; padding: 1px 0; float: left; }

Далі для області під контент пишемо свої стилі:

.content {background: #fefffd; width: 69%; margin-top: 5px; height: 355px; float: right; }

І завершальний блок це футер, робимо його на всю ширину в своєму кольорі:

.footer {background: # 91a43c; width: 100%; margin-top: 5px; height: 70px; }

Через те що sideLeft і content є плаваючими елементами за рахунок float, потрібно скинути обтікання цих блоків за допомогою clear: both; .

Створимо клас і вставимо додатковий блок з цим класом:

.clear {clear: both; } <Div class = "clear"> </ div>

У нас вийшов такого роду гумовий шаблон сайту, умовно розділений на блоки.

Підключаємо CSS media queris

Для наочної адаптації, зробимо шаблон фіксованої ширини, обгорнемо всі наші блоки в обгортку, призначимо обгортці ширину в 980 пік. і отцентріруем по середині екрана.

<Div class = "wrapper"> <div class = "header"> </ div> <div class = "top_menu"> </ div> <div class = "sideLeft"> </ div> <div class = "content "> </ div> <div class =" clear "> </ div> <div class =" footer "> </ div> </ div> .wrapper {width: 940px; margin: 50px auto; }

Потім для всіх медіа запитів створимо окремий файл media-queries.css, який підключимо після основного стилю.

Розмір екрану менше 992px

Відкриваємо файл media-queries.css на редагування, і напишемо свою умову для дестопних екранів.

Починаємо з правила @media, приховуємо стилі для браузерів які їх не підтримують only, потім пишемо носій screen і логічний оператор and «І», далі умова максимально ширини в 992 пік. тобто якщо сторінка буде менше цієї ширини тоді застосуємо наші стилі.

Потім, в фігурних дужках описуємо стилі для даного розширення:

/ * Medium Devices, Desktops * / @media only screen and (max-width: 992px) {}

Ширину обгортки зменшимо на 750 пік.

.wrapper {width: 750px; }

Поміняємо у блоків колір, а у footer трохи зменшимо висоту:

.wrapper {width: 750px; } .Header {background: # a1ece5; } .Top_menu {background: # 64f1eb; } .SideLeft {background: # 80e47e; } .Content {background: # f0f1ef; } .Footer {background: # 9ea424; height: 45px; }}

Розмір екрану менше 768px

Потім опишемо Медеа запит для середніх екранів, таких як планшети. Я скопіюють попередній стилі, заміню максимальну ширину на 768 пік. і в ньому опишу стилі для даного розширення екрану.

/ * Small Devices, Tablets * / @media only screen and (max-width: 768px) {}

Обгортку зменшуємо до 450 пік.

.wrapper {width: 450px; }

У header поміняємо колір, його висоту, і зробимо радіус в 3 пік.

.header {background: # 86ebff; height: 100px; border-radius: 3px; }

Теж саме проробимо з top_menu

.top_menu {background: # 2ca9b7; margin-top: 4px; height: 25px; }

Лівий сайт бар, міняємо колір, робимо по всій ширині, зменшуємо відступ до 4 пік. прибираємо обтікання.

.sideLeft {background: # 5ab37f; width: 100%; margin-top: 4px; float: none; }

Для наочності додамо в сайт бар додаткові блоки і оформимо їх належним чином.

Прибираємо висоту .sideLeft

.bar {background: # a5fdcf; border-radius: 5px; border: 1px solid # 129d52; margin: 3px auto; width: 95%; height: 110px; }

Для блоку під контент, міняємо колір, робимо ширину в 100%, відступ в 4 пік, зменшуємо висоту і прибираємо обтікання.

.content {background: #dbdddb; width: 100%; margin-top: 4px; height: 250px; float: none; }

Потім footer трохи зменшимо по висоті, колір і відступ трохи підкоригуємо:

.footer {background: # 758430; margin-top: 4px; height: 35px; }

Давайте для топ меню додамо іконку у вигляді кнопки як на мобільних пристроях і для цього створюємо додаткові блоки.

Потім опишемо загальні стилі, і приховуємо їх:

.top_menu {background: # 87c5ff; width: 100%; margin-top: 5px; height: 50px; position: relative; } .Knopka {display: none; width: 32px; height: 21px; top: 2px; left: 6px; background: # 6d6e6d; border-radius: 2px; position: absolute; } .Lan {width: 29px; height: 3px; background: # 2b2828; margin: 3px auto; }

Розмір екрану менше 480px

Потім опишемо стилі під маленькі розширення екранів які підходять під мобільні пристрої.

/ * Extra Small Devices, Phones * / @media only screen and (max-width: 480px) {}

Робимо обгортку в 320 пік.

.wrapper {width: 320px; }

У решти блоків поміняємо колір.

.header {background: # 3dfff2; } .Top_menu {background: # 328e8d; } .SideLeft {background: # 91b399; } .Content {background: # f2f4f2; } .Footer {background: # 6d6e6d; }}

Для більш, плавних переходів, скористаємося властивістю transition, і застосуємо його до всіх елементів.

* {Transition: all .2s; }

На дрібненькі розширень правильніше було б, якщо після верхнього меню, відразу йшов контент, а потім, правий сайтбар. Для того що б реалізувати це в нашому випадку досить блок з контентом перемістити вище сайтбара.

Підключаємо Media Queries Javascript

Медіо запити не підтримуються браузером Internet Explorer 8 і більше ранніх версій, для них потрібно підключити додатковий Javascript файл css3-mediaqueries.js.

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

Посилання на скачування -

Я показав базові принципи адаптивного дизайну, але є й інші методи які у багато разів спрощують цю роботу. Слідкуйте за нашим сайтом і обов'язково про них дізнаєтеся.

Статьи