Media Query CSS Tutorial - Standardopløsninger, CSS Breakpoints og Target Phone Størrelser

Tidligere var det meget enklere at opbygge et websted. I dag skal et websteds layout ikke kun tilpasse sig computere, men også tablets, mobile enheder og endda tv'er.

Oprettelse af et websted med et tilpasset layout kaldes Responsive Web Design. Og CSS Media Queries er en af ​​de vigtigste dele af Responsive Design. I denne artikel vil vi se nærmere på Media Queries og hvordan de bruges i CSS.

Hvis du foretrækker det, kan du se videoversionen nedenfor:

Hvad er en medieforespørgsel?

En medieforespørgsel er en CSS3-funktion, der får en webside til at tilpasse sit layout til forskellige skærmstørrelser og medietyper.

Syntaks

@media media type and (condition: breakpoint) { // CSS rules }

Vi kan målrette mod forskellige medietyper under en række forhold. Hvis betingelsen og / eller medietyperne opfylder, anvendes reglerne i medieforespørgslen, ellers vil de ikke.

Syntaksen kan virke kompliceret i starten, så lad os forklare hver del en efter en detaljeret ...

@ Medieregel

Vi begynder at definere medieforespørgsler med @media-reglen og inkluderer senere CSS-regler i de krøllede seler. Reglen @ media bruges også til at specificere målmedietyper.

@media () { // CSS rules }

Parentes

Inde i parentesen satte vi en betingelse. For eksempel vil jeg anvende en større skriftstørrelse på mobile enheder. For at gøre det skal vi indstille en maksimal bredde, der kontrollerer bredden på en enhed:

.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }

Normalt vil tekststørrelsen være 14 pixel. Men da vi anvendte en medieforespørgsel, ændres den til 16 pixel, når en enhed har en maksimal bredde på 480 pixel eller mindre.

Vigtigt: Stil altid dine medieforespørgsler i slutningen af ​​din CSS-fil.

Medietyper

Hvis vi ikke anvender en medietype, vælger @ media-reglen alle typer enheder som standard. Ellers kommer medietyper lige efter @ media-reglen. Der er mange slags enheder, men vi kan gruppere dem i 4 kategorier:

  • alle - til alle medietyper
  • print - til printere
  • skærm - til computerskærme, tablets og smartphones
  • tale - til skærmlæsere, der "læser" siden højt

For eksempel, når jeg kun vil vælge skærme, indstiller jeg skærmnøgleordet lige efter @ media-reglen. Jeg skal også sammenkæde reglerne med nøgleordet "og":

@media screen and (max-width: 480px) { .text { font-size: 16px; } }

Breakpoints

Breakpoints er måske det mest almindelige udtryk, du vil høre og bruge. Et brudpunkt er en nøgle til at bestemme, hvornår layoutet skal ændres og tilpasning af de nye regler i medieforespørgslerne. Lad os gå tilbage til vores eksempel i starten:

@media (max-width: 480px) { .text { font-size: 16px; } }

Her er brudpunktet 480 pixel. Nu ved medieforespørgslen, hvornår den nye klasse skal indstilles eller overskrives. Dybest set, hvis bredden på en enhed er mindre end 480 pixel, anvendes tekstklassen, ellers vil den ikke.

Almindelige breakpoints: er der en standardopløsning?

Et af de mest hyppigt stillede spørgsmål er “Hvilket brudpunkt skal jeg bruge?”. Der er masser af enheder på markedet, så vi kan ikke, og vi bør ikke definere faste breakpoints for hver af dem.

Derfor kan vi ikke sige, at der er en standardopløsning til enheder, men der er nogle almindeligt anvendte breakpoints i den daglige programmering. Hvis du bruger en CSS-ramme (som Bootstrap, Bulma osv.), Kan du også bruge deres breakpoints.

Lad os nu se nogle almindelige brudpunkter for bredder på enheder:

  • 320px - 480px: Mobile enheder
  • 481px - 768px: iPads, tablets
  • 769px - 1024px: Små skærme, bærbare computere
  • 1025px - 1200px: Desktops, store skærme
  • 1201px og mere - Ekstra store skærme, TV

Som jeg sagde ovenfor, kan disse breakpoints variere, og der er ingen standard nøjagtigt defineret, men disse er nogle ofte anvendte.

Afslutter

Responsivt design er et must i dagens webdesign og udviklingsfelt. Medieforespørgsler er en af ​​de vigtigste dele af opbygningen af ​​responsive layouter, og jeg håber, du finder mit indlæg nyttigt til at forstå, hvordan medieforespørgsler fungerer.

Hvis du vil lære mere om webudvikling, er du velkommen til at abonnere på min kanal.

Tak fordi du læste!