Открийте размерите на браузъра с CSS3

Когато започнем направо в света на адаптивен дизайн важно е да знаете какви са новите правила CSS3, това ни помага да открием размерите на екрана, на който се разглежда уебсайтът или приложението.
Едно от тези правила е @половина, което с подходящата комбинация от условия ни позволява да знаем размера на екрана като такъв и в зависимост от резултата да предприемаме съответните действия по отношение на неговия дизайн.

Използване на медийни заявки

Нека създадем код HTML просто и там ще включим нашия стилов лист, който ще съдържа правилата за нашия искам искам, да видим:

 Откриване на размерите на екрана 

Както виждаме, това е доста прост код, но има няколко неща, които трябва да се подчертаят. Първият е затворен в етикетите стил, там имаме две правила, първото показва, че от 600 пиксела цветът на фона на нашия текст върху етикета h1 Той ще се промени в син, нека видим кога преоразмеряваме в браузъра и тази промяна влиза в сила:

Второто правило показва, че ако максималната ширина е 400 пиксела цветът на фона на текста ще се промени на червен, което показва трето условие, тъй като всичко под 400 пиксела ще бъде червено, а над 600 ще бъде синьо, така че от 401 до 599 пиксела той ще запази бял цвят по подразбиране, нека видим:

И накрая, ако намалим екрана на нашия браузър много повече, ще въведем правилото за нашия червен цвят на фона, нека видим как изглежда:

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