Find browserdimensioner med CSS3

Når vi starter lige i verden af lydhør design det er vigtigt at vide, hvad de nye regler for CSS3, dette hjælper os med at registrere dimensionerne på den skærm, hvor webstedet eller applikationen bliver vist.
En af disse regler er @halvt, som med den passende kombination af betingelser giver os mulighed for at kende størrelsen på skærmen som sådan og afhængigt af resultatet, foretage de relevante handlinger vedrørende dens design.

Brug af medieforespørgsler

Lad os oprette en kode HTML enkelt, og der kommer vi til at inkludere vores typografiark, som vil indeholde reglerne for vores betyder lyst, Lad os se:

 Find skærmdimensioner 

Som vi kan se, er det en ret simpel kode, men der er flere ting at fremhæve. Den første er vedlagt etiketterne stil, der har vi to regler, den første angiver det fra 600 pixels baggrundsfarven på vores tekst på etiketten h1 Det ændres til blåt, lad os se, når vi ændrer størrelsen i browseren, og denne ændring træder i kraft:

Den anden regel angiver, at hvis den maksimale bredde er 400 pixels baggrundsfarven på teksten ændres til rød, hvilket angiver en tredje betingelse, da alt under 400 pixels er rødt og over 600 vil være blåt, så fra 401 til 599 pixels vil det beholde farven hvid som standard, lad os se:

Endelig, hvis vi reducerer skærmen i vores browser meget mere, indtaster vi reglen for vores røde baggrundsfarve, lad os se, hvordan det ser ud:

Vi ser da, at det er en ekstremt enkel opgave at registrere dimensionerne af vores browser takket være CSS3, noget der er yderst nyttigt, når vi arbejder med responsive designs, og vi skal kende dimensionerne på brugerens browser for at anvende stilarter, der får vores websted til at se godt ud på enhver enhed og eksisterende skærmopløsning.