Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Використання @media-запитів для адаптивних стилів | Адаптивний Вебдизайн у CSS
Просунуті техніки CSS

bookВикористання @media-запитів для адаптивних стилів

Розглянемо реальне використання всієї функціональності @media.

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

<media_type>

Найтиповішим значенням типу медіа є screen, оскільки зазвичай ми створюємо вебсторінки для пристроїв з екранами. Розглянемо, як це використовувати:

@media screen and (min-width: 768px) {
  .container {
    background-color: purple;
  }
}

За допомогою цього правила ми повідомляємо браузеру, що якщо пристрій користувача має екран і його ширина становить 768px або більше, то елемент із класом container матиме властивість background-color зі значенням purple.

Вказуємо ширину екрана, для якої хочемо задати певні css правила. Розглянемо наступні приклади:

/* 1st example */
@media screen and (max-width: 1200px) {
  .container {
    color: aliceblue;
  }
}

/* 2nd example */
@media screen and (min-width: 1680px) {
  .container {
    color: gainsboro;
  }
}

У першому прикладі ми повідомляємо браузеру, що для будь-яких пристроїв із шириною екрана меншою або рівною 1200px, до елемента з класом color застосовується властивість aliceblue зі значенням container.

У другому прикладі ми інформуємо браузер, що якщо ширина екрана будь-якого пристрою перевищує або дорівнює 1680px, до елемента з класом color застосовується властивість gainsboro зі значенням container.

Оператори є необов'язковими та вказуються між типом медіа та медіа-фічею. and повідомляє браузеру, що всі зазначені умови мають бути виконані.

@media screen and (min-width: 380px) and (max-width: 840px) {
  .link {
    text-decoration: overline;
  }
}

Це правило повідомляє браузеру, що елемент із класом link повинен мати властивість text-decoration зі значенням overline лише якщо користувач має пристрій із екраном ТА ширина екрана дорівнює або перевищує 380px ТА ширина екрана дорівнює або менша за 840px.

Використовуючи оператор ,, можна вказати групу виразів, при виконанні будь-якого з яких буде застосовано медіа-запит.

@media screen and (min-width: 960px), (max-width: 540px) {
  .link {
    text-decoration: overline;
  }
}

За допомогою цього правила браузеру повідомляється, що елемент із класом link повинен мати властивість text-decoration зі значенням overline, якщо ширина екрана користувача перевищує або дорівнює 960px АБО ширина екрана менша або дорівнює 540px.

question mark

Як можна вказати властивості для ширини екрана, починаючи з 680px і закінчуючи 864px?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 6. Розділ 2

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain more about other media types besides 'screen'?

What are some common use cases for combining multiple media features?

How do I choose between using 'and' and ',' operators in media queries?

Awesome!

Completion rate improved to 2.04

bookВикористання @media-запитів для адаптивних стилів

Свайпніть щоб показати меню

Розглянемо реальне використання всієї функціональності @media.

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

<media_type>

Найтиповішим значенням типу медіа є screen, оскільки зазвичай ми створюємо вебсторінки для пристроїв з екранами. Розглянемо, як це використовувати:

@media screen and (min-width: 768px) {
  .container {
    background-color: purple;
  }
}

За допомогою цього правила ми повідомляємо браузеру, що якщо пристрій користувача має екран і його ширина становить 768px або більше, то елемент із класом container матиме властивість background-color зі значенням purple.

Вказуємо ширину екрана, для якої хочемо задати певні css правила. Розглянемо наступні приклади:

/* 1st example */
@media screen and (max-width: 1200px) {
  .container {
    color: aliceblue;
  }
}

/* 2nd example */
@media screen and (min-width: 1680px) {
  .container {
    color: gainsboro;
  }
}

У першому прикладі ми повідомляємо браузеру, що для будь-яких пристроїв із шириною екрана меншою або рівною 1200px, до елемента з класом color застосовується властивість aliceblue зі значенням container.

У другому прикладі ми інформуємо браузер, що якщо ширина екрана будь-якого пристрою перевищує або дорівнює 1680px, до елемента з класом color застосовується властивість gainsboro зі значенням container.

Оператори є необов'язковими та вказуються між типом медіа та медіа-фічею. and повідомляє браузеру, що всі зазначені умови мають бути виконані.

@media screen and (min-width: 380px) and (max-width: 840px) {
  .link {
    text-decoration: overline;
  }
}

Це правило повідомляє браузеру, що елемент із класом link повинен мати властивість text-decoration зі значенням overline лише якщо користувач має пристрій із екраном ТА ширина екрана дорівнює або перевищує 380px ТА ширина екрана дорівнює або менша за 840px.

Використовуючи оператор ,, можна вказати групу виразів, при виконанні будь-якого з яких буде застосовано медіа-запит.

@media screen and (min-width: 960px), (max-width: 540px) {
  .link {
    text-decoration: overline;
  }
}

За допомогою цього правила браузеру повідомляється, що елемент із класом link повинен мати властивість text-decoration зі значенням overline, якщо ширина екрана користувача перевищує або дорівнює 960px АБО ширина екрана менша або дорівнює 540px.

question mark

Як можна вказати властивості для ширини екрана, починаючи з 680px і закінчуючи 864px?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 6. Розділ 2
some-alt