Медіа-запити в css

У попередній статті я розповів про те, що таке адаптивна верстка, і для чого вона потрібна. І там я сказав, що основний механізм адаптивної верстки - це медіа-запити. ось про медіа-запитах в CSS ми і поговоримо в цей раз.

Давайте відразу розберемо приклад медіа-запиту:

Відео: Медіа запити. Повний розбір. Media Queries - Full Tutorial in Russian

@media screen and(max-width:768px){ 
 body { 
font-size:9pt- 
} 
}

Даний код означає наступне: "Якщо ширина вікна браузера 768px, то застосувати стилі, зазначені в фігурних дужках". Щоб краще зрозуміти, як це працює, напишіть ось такий код:

 
 
 
Медіа-запити 
 
 
 
 текст

Відкрийте цей код в браузері і зверніть увагу на розмір тексту. Тепер почніть зменшувати ширину вікна браузера, і коли вона досягне 768px, то текст помітно зменшиться. Ось це і є адаптивна верстка і робота медіа-запитів в CSS.

Безумовно, таких медіа-запитів може бути дуже багато, а всередині них може бути далеко не один селектор body, а скільки завгодно різних селекторів.

Так само є й інші параметри, такі як min-width, який буде спрацьовувати при зазначеної ширині і більше. аналогічні параметри max-height і min-height, що відповідають за висоту. Так само можна комбінувати різні параметри через and:

@media screen and(max-width:768px)and(max-height:300px){ 
 body { 
font-size:9pt- 
} 
}

В даному випадку стилі будуть підключатися тільки при ширині менше, або дорівнює 768px і при висоті менше, або дорівнює 300px.

Відео: Tutorial: Learn how to use CSS Media Queries in less than 5 minutes

Що стосується практики, то можу сміливо сказати, що в 95% випадках використовується лише один max-width. Іноді ще й min-width. І ще раз повторюю, що є й інші медіа-запити в CSS, але забивати ними Вашу думку не буду. Але якщо дуже хочеться, то їх можна подивитися в довіднику.

Поділися в соціальних мережах:

Схожі