46664660 na@drweb.no
Vi har byttet navn tilFjordweb Solutions AS

Her er tre eksempler på hvordan media queries kan brukes:

 

@media screen and (max-width: 1000px) {.desktop-only { display: none; }}

@media screen and (min-width: 1000px) {.mobile-only { display: none; }}

@media screen and (max-width: 300px) {body { background-color: lightblue; }}

Det første eksempelet gjør at maks bredde på elementer som bruker CSS-klassen .desktop-only er 1000 piksler. Skjermer med mindre enn 1000 piksler vil da ikke vise dette elementet.

Eksempel nummer to er det samme som det første, bare omvendt. Bruker du CSS-klassen .mobile-only vil elementer med denne CSS-klassen kun vises på oppløsning som er lavere enn 1000 piksler.

I det siste eksempelet lager vi ikke en egen CSS-klasse, men bruker body. Her har vi definert at bakgrunnsfargen skal bli lyseblå når oppløsningen er 300 piksler eller lavere.