Min-bredde og maks bredde i mediespørsmål | Forklart

Et responsivt nettsted blir referert til som et dynamisk nettsted som endrer strukturen i henhold til enheten den vises på. Det kan endre atferden avhengig av skjermbredde, skjermoppløsning, orientering osv. For enheten. Nå for å lage et slikt nettsted, benytter utviklere seg av medier. Her i denne artikkelen er emnene som diskuteres som følger.

1. Media -spørring
2. CSS breakpoints
3. Min-bredde
4. Maks bredde
5. Kombinere begge deler
6. Når skal du bruke hvilken: Min-bredde eller maks bredde

Media -spørring

Medieforespørsler ble introdusert i CSS versjon 3 som lar brukerne lage responsive nettsteder gjennom bruk av @media -regelen. Denne regelen krever at du oppgir medietypen som utskrift, skjerm, tale eller sammen med noen logiske uttrykk som spesifiserer visse mediefunksjoner slik bredde, oppløsning, tetthet osv.

Disse spørsmålene tillater i utgangspunktet endring av nettoppsettet, avhengig av enhetstypen som stasjonær, bærbar PC, mobil osv. Her har vi vist deg hvordan du kan definere en medieforespørsel.

Syntaks

@Media-skjerm og (min bredde: 420px) og (maks bredde: 650px)
@regel
Media type
mediefunksjon
mediefunksjon
operatør
operatør

En medieforespørsel starter alltid med @media -regelen og krever at du spesifiserer medietypen som spørringen skal brukes. Da må du oppgi skjermtypen og bruke operatører som 'og' for å kombinere mediefunksjoner som min bredde, eller maks bredde.

Media -spørsmål er spesifisert på visse punkter som blir referert til som media -spørringspunkter. Se den kommende delen for å lære dem i detalj.

CSS breakpoints

Breakpoints i CSS blir referert til som de punktene som strukturen til et nettsted endres som tilsvarer skjermstørrelsen på enhetstypen. Breakpoints avgjøres enten basert på enhetstypen eller innholdstypen. Noen vanlige bruddpunkter er som følger.

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

Mens du har lest forklaringene ovenfor, må du ha lagt merke til at vi har brukt to mediefunksjoner min bredde og maks bredde. Du må lure på hva som er disse og når du skal bruke dem. Nedenfor har vi gitt deg alle viktige detaljer.

Min-bredde

Min-bredde mediefunksjonen spesifiserer minimumsbredde på en bestemt enhet. I delen ovenfor har vi for eksempel vervet noen skjermbredder på grunnlag av enhetstypen, for eksempel minimum skjermbredde på mobile enheter er 320px.

Eksempel

@Media-skjerm og (min bredde: 600px)
P
Font-størrelse: 16px;

I koden ovenfor har vi spesifisert at når minimumsskjermbredden er 600px eller bredere, vil fontstørrelsen til avsnittet endres til 16px. Så enhver enhet med denne skjermbredden vil vise avsnittteksten i den spesifiserte skriftstørrelsen.

Maks bredde

Funksjonen for maksid med medier sier den maksimale bredden på en bestemt enhet. For eksempel er den maksimale skjermbredden på mobile enheter 480px. Kontakt eksemplet nedenfor for å forstå det på en bedre måte.

Eksempel

@Media-skjerm og (maks bredde: 700px)
P
Font-størrelse: 25px;

Koden over sier at når den maksimale skjermbredden er 700px eller mindre, vil fontstørrelsen til avsnittet endre seg til 25px. Enhver enhet som gjengir denne skjermbredden vil vise avsnittteksten i den spesifiserte skriftstørrelsen.

Kombinere begge deler

Du kan også bruke begge mediefunksjonene sammen ved å kombinere dem med 'og' operatøren.

Eksempel

P
Font-stil: fet;

@Media-skjerm og (min bredde: 600px) og (maks bredde: 700px)
P
Font-stil: kursiv;

Ovennevnte kode spesifiserer at hvis skjermbredden ligger mellom 600px til 700px, vil skriftstilen være kursiv ellers vil fontstilen være dristig.

Når skal du bruke hvilken: Min-bredde eller maks bredde

Hvis du designer 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, hvis du designer for større enheter først, så bruk maks bredde og deretter stille inn for mindre enheter deretter.

Konklusjon

Min bredde og maks bredde er mediefunksjoner som tilsvarer en viss medietype som er spesifisert i medieforespørselen. Min-bredden spesifiserer minimumsskjermbredde på en bestemt enhet, i mellomtiden heter det maksimalt mediefunksjon den maksimale skjermbredden på en bestemt enhet. Hvis du designer nettstedet ditt for mindre enheter først, må du angi de første breakpoints med min bredde, mens du først designer for større enheter. Dette innlegget diskuterer min bredde og medier med medier.