0

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

 


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

Медіа-запит - це функція CSS3, яка використовується для адаптації макета веб-сторінки до різних розмірів екрану і типів пристроїв.

Синтаксис

@media media type and (condition: breakpoint) {
  // Правила CSS
}

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

.text {
  font-size: 14px;
}@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Зазвичай розмір тексту становить 14 пікселів. Однак, оскільки  застосовано медіа-запит, він зміниться до 16 пікселів при максимальній ширині пристрою 480 пікселів і менше.

Типи пристроїв 

Типи пристроїв розміщуються відразу після правила @media. Якщо тип не вказано, правило @media вибирає всі типи за замовчуванням. Існує безліч видів пристроїв, проте їх можна розділити на 4 категорії:

  • all - для всіх типів пристроїв; 
  • print - для принтерів; 
  • screen - для екранів комп'ютерів, планшетів і смартфонів;
  • speech - для скрінрідеров, які «читають» сторінку вголос. 

Наприклад, щоб вибрати тільки екрани, потрібно встановити ключове слово screen відразу після правила @media. Правила також необхідно об'єднати ключовим словом «and»:

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Точки зупинки 

Точка зупинки (break point)- це ключ, який визначає, коли слід змінити макет і адаптувати нові правила всередині медіа-запитів. 

У прикладі:

@media screen and (max-width: 480px) {
 .text {
 font-size: 16px;
 }
}

Тут точка зупинки становить 480 пікселів. Тепер медіа-запит знає, коли встановлювати або перезаписувати новий клас. Якщо ширина пристрою менше 480 пікселів, то буде застосований клас text.

Метатег viewport

Сторінки, адаптовані для перегляду на різних типах пристроїв, повинні містити в розділі <head> метатег viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Властивість width визначає віртуальну ширину вікна перегляду, значення device-width - фізичну ширину пристрою. Іншими словами, width відображає значення document.documentElement.clientWidth, а device-width - screen.width. При першому завантаженні сторінки властивість initial-scale керує початковим рівнем масштабування, initial-scale = 1 означає, що 1 піксель вікна перегляду = 1 піксель CSS.

На які розміри екрану потрібно орієнтуватися 

При складанні медіазапитів потрібно орієнтуватися на так звані переломні (контрольні) точки дизайну, тобто такі значення ширини області перегляду, в яких дизайн сайту істотно змінюється, наприклад, з'являється горизонтальна смуга прокрутки. Щоб визначити ці точки, потрібно відкрити сайт в браузері і поступово зменшувати область перегляду.

Поширені точки зупинки: 

  • 320px - 480px: мобільні пристрої; 
  • 481px - 768px: планшети; 
  • 769px - 1024px: маленькі екрани, ноутбуки; 
  • 1025px - 1200px: великі екрани; 
  • 1201px і більше - дуже великі екрани, телевізори.
Інші точки зупинок:

/* Smartphones (вертикальна  і горизонтальна ориєнтація) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* стилі */
}

/* Smartphones (горизонтальна) ----------- */
@media only screen and (min-width: 321px) {
/* стилі */
}

/* Smartphones (вертикальная) ----------- */
@media only screen and (max-width: 320px) {
/* стилі */
}

/* iPads (вертикальна і горизонтальна) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* стилі */
}

/* iPads (горизонтальна) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* стилі*/
}

/* iPads (вертикальна) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* стилі */
}

/* iPad 3**********/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стилі */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стилі */
}

/* Настільні комп'ютери і ноутбуки ----------- */
@media only screen  and (min-width: 1224px) {
/* стилі */
}

/* Великі екрани ----------- */
@media only screen  and (min-width: 1824px) {
/* стили */
}

/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стилі */
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стилі */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стилі */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стилі */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стилі */
}
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стилі */
}

Чуйність є обов'язковим параметром в сучасній області веб-дизайну і розробки, а медіа-запити - одні з найбільш важливих частин створення чуйних макетів.

Приклади застосування медіа-запитів 

Приклад 1

Приклад 2

Приклад 3