Upptäck webbläsarmått med CSS3

När vi börjar helt i världen av responsiv design det är viktigt att veta vad de nya reglerna för CSS3, detta hjälper oss att upptäcka måtten på skärmen där webbplatsen eller applikationen visas.
En av dessa regler är @halv, som med den lämpliga kombinationen av förhållanden gör att vi kan känna storleken på skärmen som sådan och, beroende på resultatet, vidta relevanta åtgärder när det gäller dess design.

Använda mediefrågor

Låt oss skapa en kod HTML enkelt och där kommer vi att inkludera vårt stilark, som kommer att innehålla reglerna för vårt betyder vill, låt oss se:

 Upptäck skärmens mått 

Som vi kan se är det en ganska enkel kod, men det finns flera saker att lyfta fram. Den första finns i etiketterna stil, där har vi två regler, den första indikerar att från 600 pixlar bakgrundsfärgen på vår text på etiketten h1 Det ändras till blått, låt oss se när vi ändrar storlek på webbläsaren och denna ändring träder i kraft:

Den andra regeln indikerar att om den maximala bredden är 400 pixlar bakgrundsfärgen på texten ändras till rött, vilket indikerar ett tredje villkor, eftersom allt under 400 pixlar är rött och över 600 kommer att vara blått, så från 401 till 599 pixlar kommer det att hålla färgen vit som standard, låt oss se:

Slutligen, om vi minskar skärmen i vår webbläsare mycket mer, kommer vi att ange regeln för vår röda bakgrundsfärg, låt oss se hur det ser ut:

Vi ser då att upptäcka måtten på vår webbläsare är en extremt enkel uppgif.webpt tack vare CSS3, något som är extremt användbart när vi arbetar med lyhörd design och vi måste känna till måtten på användarens webbläsare för att tillämpa stilar som gör att vår webbplats ser bra ut på alla enheter och befintlig skärmupplösning.