Finn nettleserdimensjoner med CSS3

Når vi starter helt i verden av responsiv utforming Det er viktig å vite hva de nye reglene gjelder CSS3, hjelper dette oss med å oppdage dimensjonene på skjermen som nettstedet eller applikasjonen vises på.
En av disse reglene er @halv, som med en passende kombinasjon av forhold gjør at vi kan vite størrelsen på skjermen som sådan, og avhengig av resultatet, iverksette relevante handlinger angående designen.

Bruke mediespørsmål

La oss lage en kode HTML enkelt, og der skal vi inkludere stilarket vårt, som vil inneholde reglene for vårt mener lyst, la oss se:

 Finn skjermdimensjoner 

Som vi kan se, er det en ganske enkel kode, men det er flere ting å markere. Den første er vedlagt i etikettene stil, der har vi to regler, den første indikerer at fra 600 piksler bakgrunnsfargen på teksten vår på etiketten h1 Den endres til blå, la oss se når vi endrer størrelsen i nettleseren, og denne endringen trer i kraft:

Den andre regelen indikerer at hvis maksimal bredde er 400 piksler bakgrunnsfargen på teksten endres til rød, noe som indikerer en tredje betingelse, siden alt under 400 piksler vil være rødt og over 600 vil være blått, så fra 401 til 599 piksler vil den beholde fargen hvit som standard, la oss se:

Til slutt, hvis vi reduserer skjermen i nettleseren vår mye mer, legger vi inn regelen for vår røde bakgrunnsfarge, la oss se hvordan det ser ut:

Vi ser da at det å oppdage dimensjonene til nettleseren vår er en ekstremt enkel oppgave takket være CSS3, noe som er ekstremt nyttig når vi jobber med responsive design, og vi må kjenne dimensjonene til brukerens nettleser for å bruke stiler som får nettstedet vårt til å se bra ut på alle enheter og eksisterende skjermoppløsning.