Ако сте натрупали някакви базови познания в сферата на front-end дизайна, вероятно сте се изправяли пред въпроса „А дали няма начин да прилагаме различни условия при различни обстоятелства?“. Това, от което се нуждаете, в програмирането се нарича „условни конструкции“. CSS предлага еквивалент на условните конструкции и това са медийните заявки (“Media Queries”).

Какво представляват “Media Queries”?

Подобно на условните конструкции, чрез прилагането на медийните заявки, вие определяте изпълнението на дадени свойства, но само ако отговарят на определени условия. Именно поради тази причина Media Queries днес са една от основните колони на responsive дизайна. Чрез изграждане на условни конструкции от media querries, вие можете да зададете базовите шаблони на разположение на различните елементи на вашия сайт, в зависимост от размера на дисплея на който ще бъде отварян вашия сайт.

При media queries също имате различни оператори, чрез които да изразявате различни състояние – логическо „и“, логическо „или“, логическо отрицание, ексклузивно изпълнение (което е еквивалентно с концепцията за “switch-case” конструкция при програмните езици) на дадено свойство, измежду няколко други, и други възможности.

Как по-правилно да приложим media querries

Предполагам първата мисъл на много от вас ще е да вземат базови измерения на дисплеите на някои популярни модели смартфони (320px, 480px, 768px, 1024 px и т.н.) и да изградят своята условна конструкция. Тя обаче не е най-доброто решение, тъй като в наше време всеки производител се стреми да увеличи качеството на екрана на своето устройство, доколкото е възможно без това да се отразява на общия размер на устройството. Това означава, че се търсят решения като увеличаване на PPI – броят пиксели на инч. По този начин нов модел, който има същия размер в мерни единици може да съдържа различен брой пиксели от предхождащ го модел и да преминава една или друга граница на някоя от вашите медийни заявки и следователно дизайнът на вашия сайт/приложение може да изглежда зле.

Как да подходим по-удачно с media queries в този случай? Започнете с размерите на най-малкия екран, на който възнамерявате вашият сайт да се визуализира и постепенно започнете да увеличавате. Момента в който елементите вече не стоят оптимално спрямо размера, който сте достигнали – значи е време да ги пренаредите и съответно – преди това да зададете този размер като отделен breakpoint. Да, толкова е просто. Разбира се, за по-оптимален ефект, можете да съобразите достигнатия размер с наличните пропорции на дисплеи, които съществуват, за да може вашия responsive дизайн да е наистина максимално ефективен.

Съществуват още много тънкости и неща, които трябва да усвоите както по отношение на media queries, така и на CSS като цяло. Най-лесният и ефективен начин да постигнете това е, като запишете нашия курс „CSS Advanced – ноември 2019“. Очакваме ви!