Урок за CSS за медийни заявки - Стандартни разделителни способности, CSS точки на прекъсване и целеви размери на телефона

В миналото изграждането на уебсайт беше много по-лесно. Днес оформлението на уебсайта трябва да се адаптира не само към компютрите, но и към таблетите, мобилните устройства и дори телевизорите.

Изработването на уебсайт с адаптивно оформление се нарича Responsive Web Design. И CSS медийните заявки са една от най-важните части на адаптивния дизайн. В тази статия ще разгледаме по-отблизо медийните заявки и как да ги използваме в 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; } }

Обикновено размерът на текста ще бъде 14px. Тъй като обаче приложихме медийна заявка, тя ще се промени на 16px, когато дадено устройство има максимална ширина 480px или по-малка.

Важно: Винаги поставяйте своите медийни заявки в края на вашия CSS файл.

Видове носители

Ако не приложим тип носител, правилото @ media избира всички типове устройства по подразбиране. В противен случай типовете носители идват веднага след правилото @ media. Има много видове устройства, но можем да ги групираме в 4 категории:

  • всички - за всички видове медии
  • печат - за принтери
  • екран - за компютърни екрани, таблети и смартфони
  • реч - за екранни четци, които „четат“ страницата на глас

Например, когато искам да избера само екрани, ще задам ключовата дума за екрана веднага след правилото @ media. Също така трябва да свържа правилата с ключовата дума „и“:

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

Точки на прекъсване

Точките на прекъсване са може би най-често срещаният термин, който ще чуете и използвате. Точката на прекъсване е ключ за определяне кога да се промени оформлението и да се адаптират новите правила в медийните заявки. Да се ​​върнем към нашия пример в началото:

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

Тук точката на прекъсване е 480px. Сега медийната заявка знае кога да зададе или презапише новия клас. По принцип, ако ширината на дадено устройство е по-малка от 480px, текстовият клас ще бъде приложен, в противен случай няма.

Общи точки на прекъсване: Има ли стандартна резолюция?

Един от най-често задаваните въпроси е „Коя точка на прекъсване да използвам?“. На пазара има тон устройства, така че не можем и не трябва да определяме фиксирани точки на прекъсване за всяко от тях.

Ето защо не можем да кажем, че има стандартна разделителна способност за устройства, но има някои често използвани точки на прекъсване в ежедневното програмиране. Ако използвате CSS рамка (като Bootstrap, Bulma и др.), Можете също да използвате техните точки на прекъсване.

Сега нека видим някои общи точки на прекъсване за ширината на устройствата:

  • 320px - 480px: Мобилни устройства
  • 481px - 768px: iPad, таблети
  • 769px - 1024px: Малки екрани, лаптопи
  • 1025px - 1200px: Настолни компютри, големи екрани
  • 1201px и повече - Изключително големи екрани, телевизор

Както казах по-горе, тези точки на прекъсване могат да се различават и няма точно определен стандарт, но това са някои често използвани.

Обобщавайки

Отзивчивият дизайн е задължителен в днешното поле за уеб дизайн и разработка. Заявките за медии са една от най-важните части от изграждането на отзивчиви оформления и се надявам, че моята публикация ще ви бъде полезна за разбиране как работят медийните заявки.

Ако искате да научите повече за уеб разработката, не се колебайте да се абонирате за моя канал.

Благодаря ви, че прочетохте!