Откријте димензије прегледача помоћу ЦСС3

Када почнемо директно у свету Нацрт са одзивом важно је знати која су нова правила ЦСС3, ово нам помаже да откријемо димензије екрана на којем се веб локација или апликација прегледавају.
Једно од ових правила је @пола, који нам уз одговарајућу комбинацију услова омогућава да знамо величину екрана као таквог и, у зависности од резултата, предузмемо одговарајуће радње у вези са његовим дизајном.

Коришћење медијских упита

Креирајмо код ХТМЛ једноставно и ту ћемо укључити наш стилски лист који ће садржати правила за наш значи желети, Хајде да видимо:

 Откријте димензије екрана 

Као што видимо, то је прилично једноставан код, међутим постоји неколико ствари које треба истаћи. Први је затворен у етикете стил, ту имамо два правила, прво указује да из 600 пиксела боју позадине нашег текста на етикети х1 Промениће се у плаво, да видимо када променимо величину у прегледачу и ова промена ступи на снагу:

Друго правило указује да ако је максимална ширина 400 пиксела боја позадине текста ће се променити у црвену, што указује на трећи услов, јер ће све испод 400 пиксела бити црвено, а изнад 600 плаво, па ће од 401 до 599 пиксела задржати белу боју по подразумеваној вредности, да видимо:

Коначно, ако смањимо екран нашег прегледача много више, унећемо правило за нашу црвену боју позадине, да видимо како то изгледа:

Видимо да је откривање димензија нашег прегледача изузетно једноставан задатак захваљујући ЦСС3, нешто што је изузетно корисно када радимо са прилагодљивим дизајном и морамо знати димензије прегледача корисника да бисмо примијенили стилове који чине да наша веб страница изгледа добро на било ком уређају и постојећој резолуцији екрана.