Breakpoints i CSS Media Queries | Forklart

CSS Media -spørsmål blir referert til som spørsmål som lar deg endre utseendet til nettstrukturen, avhengig av type enhet som bruker nettstedet, for eksempel stasjonære maskiner, telefoner, bærbare datamaskiner osv., Og viser seg nyttige når det gjelder å designe responsive nettsteder. Disse spørsmålene er spesifisert ved hjelp av @media -regelen og bør defineres på visse punkter der modifiseringen i nettoppsettet er nødvendig. Disse punktene kalles breakpoints som vi har diskutert i detalj nedenfor.

Introduksjon til CSS Breakpoints

Breakpoints i CSS blir referert til som de punktene som utformingen av et nettsted endrer som tilsvarer skjermstørrelsen på enhetstypen. Disse punktene blir også sett på som media -spørringspunkter fordi disse er spesifisert i medieforespørsler.

Nå som vi har lært hvilke media -spørringspunkter er, la oss utforske hvordan vi kan stille dem.

Sette CSS -brytepunkter

Det er ingen standard som er gitt for å sette et bruddpunkt, derfor kan bruddpunkter definert i forskjellige nettstrukturer variere. Vi har imidlertid fått to typer tilnærminger for å sette et bruddpunkt.

1. Bruddpunkter for enhetstype

2. Innholdstype Breakpoints

La oss se dem i detalj.

Bruddpunkter for enhetstype

Som navnet antyder, er pauspunkter for enhetstype hensyn til prosedyren for å spesifisere bruddpunkter basert på forskjellige enhetstyper. Skjønt, dette kan ikke betraktes som en god tilnærming fordi teknologi utvikler seg av minuttet og nye enheter dukker opp nå og da. Derfor, hver gang en ny enhet dukker opp, må utviklerne spesifisere et bruddpunkt for den aktuelle enheten som kan være hektisk.

Dessuten er listen over medieforespørsler enorm når du definerer breakpoints i henhold til enhetstype. Ulike enheter på grunnlag av hvilke du kan bestemme at breakpoints er som følger.

1. Stasjonære maskiner

2. Tabletter

3. Mobiltelefoner

Her har vi presentert noen eksempler på enhetsbaserte breakpoints.

For iPhone 13

@media bare skjerm og (enhetsbredde: 1170px) og (enhetshøyde: 2532px)

..

For Samsung Galaxy S9+

@media bare skjerm og (enhetsbredde: 1440px) og (enhetshøyde: 2960px)

..

I stedet for å spesifisere bruddpunkter for hver enhet separat, kan du også definere bruddpunkter for vanlige enhetsgrupper.

/ * For veldig små enheter (486px og under) */
@media bare skjerm og (maks bredde: 486px) …
/ * For små enheter (596px og opp) */
@media bare skjerm og (min bredde: 596px) …
/ * For medium enheter (720px og opp) */
@media bare skjerm og (min bredde: 720px) …
/ * For store enheter (995px og opp) */
@media bare skjerm og (min bredde: 995px) …
/ * For ekstra store enheter (1100px og opp) */
@media bare skjerm og (min bredde: 1100px) …

Innholdstype Breakpoints

Spesifisering av breakpoints basert på den typen innhold som nettstedet ditt viser, brukes innholdstype breakpoints. Dette anses å være en god tilnærming fordi denne tilnærmingen krever at du bare spesifiserer bruddpunkter på de punktene der innholdet trenger noen form for justering. Ved å bruke denne tilnærmingen blir antall medier.

Noen eksempler på innholdstype breakpoints er gitt nedenfor.

For skjermbredde 720px og bredere.

@media bare skjerm og (min bredde: 720px)

..

For skjermoppløsning mellom 480px og 720px.

@media bare skjerm og (min bredde: 480px) og (maks bredde: 720px)

..

Bruke min og maks bredde breakpoints på riktige steder

I eksemplene ovenfor må du ha lagt merke til at vi har brukt to typer breakpoints som er min bredde og maks bredde. Et spørsmål må oppstå i tankene dine som du skal bruke når.

Svaret på dette spørsmålet er enkelt: Hvis du utvikler nettstedet ditt for mindre enheter først, må du angi standard CSS-breakpoints med min bredde og justere for større enheter deretter. I mellomtiden er det motsatte tilfellet for større enheter. Hvis du utvikler deg for større enheter først, bruk maksimal bredde og innstiller deretter for mindre enheter deretter.

Typer breakpoints brukt

Når markedstypemarkedet ikke var så stort som det nå er, ble skjermbredden for hver enhet spesifisert separat, men denne tilnærmingen anbefales ikke nå, da det er et stort utvalg av enhetstyper i markedet.

Tilnærmingen som er å foretrekke er at du bør være klar over typen webdesign, målgruppen din og hvilken type enheter publikummet ditt stort sett bruker og skjermbredden på disse enhetene. Her har vi vervet noen hyppige breakpoints brukt.

1. For mobile enheter: 320px til 480px

2. For nettbrett og iPads: 481px til 768px

3. For bærbare datamaskiner: 769px til 1024px

4. For stasjonære maskiner: 1025px til 1200px

Konklusjon

Breakpoints i CSS blir referert til som de punktene som utformingen av et nettsted endrer som tilsvarer skjermstørrelsen på enhetstypen. Det er to typer bruddpunkter, en som er spesifisert på grunnlag av enhetstypen og den andre er definert på grunnlag av innholdstype. Tilnærmingen som bruker innholdstypen er å foretrekke fremfor enhetstypen, da det er et stort utvalg av enheter som er tilgjengelige i markedet, og det blir vanskelig å spesifisere breakpoints for hver enhet individuelt. Selv om det er visse vanlige bruddpunkter som brukes til forskjellige enheter som vi har diskutert i detalj i denne oppskrivningen sammen med andre detaljer angående breakpoints.