Підручник з CSS для медіа-запитів - стандартні роздільні здатності, точки зупинку CSS та цільові розміри телефону

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

Створення веб-сайту з адаптивним макетом називається Адаптивний веб-дизайн. А запити CSS Media є однією з найважливіших частин адаптивного дизайну. У цій статті ми детальніше розглянемо медіа-запити та способи їх використання в CSS.

Якщо ви хочете, ви можете переглянути відеоверсію нижче:

Що таке медіа-запит?

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

Синтаксис

@media media type and (condition: breakpoint) { // CSS rules }

Ми можемо націлювати рекламу на різні типи носіїв за різних умов. Якщо умова та / або типи носіїв відповідають, тоді застосовуватимуться правила всередині медіа-запиту, інакше вони не будуть.

На початку синтаксис може здатися складним, тож давайте детально пояснимо кожну частину ...

@ Правило медіа

Ми починаємо визначати медіа-запити за допомогою правила @media, а пізніше включаємо правила CSS всередину фігурних дужок. Правило @ media також використовується для визначення цільових типів носіїв.

@media () { // CSS rules }

Дужки

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

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

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

Важливо: Завжди розміщуйте медіа-запити в кінці файлу CSS.

Типи носіїв

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

  • усі - для всіх типів носіїв
  • друк - для принтерів
  • екран - для екранів комп'ютерів, планшетів та смарт-телефонів
  • мова - для читачів з екрану, які “читають” сторінку вголос

Наприклад, коли я хочу вибрати лише екрани, я встановлю ключове слово screen безпосередньо після правила @ media. Я також повинен поєднати правила з ключовим словом “і”:

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

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

Точки зупинку - це, мабуть, найпоширеніший термін, який ви будете чути та використовувати. Точка зупинки - це ключ до того, щоб визначити, коли потрібно змінити макет та адаптувати нові правила всередині медіа-запитів. Повернемося до нашого прикладу на початку:

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

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

Загальні точки зупинки: чи існує стандартна резолюція?

Одне з найпоширеніших запитань - “Яку точку зупинки слід використовувати?”. На ринку є маса пристроїв, тому ми не можемо і не повинні визначати фіксовані точки зупинки для кожного з них.

Ось чому ми не можемо сказати, що існує стандартна роздільна здатність для пристроїв, але в щоденному програмуванні є деякі часто використовувані точки зупинку. Якщо ви використовуєте фреймворк CSS (наприклад, Bootstrap, Bulma тощо), ви також можете використовувати їх точки зупинку.

Тепер давайте подивимось деякі загальні точки зупинки ширини пристроїв:

  • 320 пікс. - 480 пікс.: Мобільні пристрої
  • 481px - 768px: iPad, планшети
  • 769px - 1024px: маленькі екрани, ноутбуки
  • 1025px - 1200px: Настільні комп’ютери, великі екрани
  • 1201 пікс. Та більше - надзвичайно великі екрани, телевізор

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

Підведенню

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

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

Дякую за читання!