Vodič za CSS za medijske upite - Standardne rezolucije, CSS točke prekida i ciljne veličine telefona

U prošlosti je izrada web stranice bila puno jednostavnija. Danas bi se izgled web stranice trebao prilagoditi ne samo računalima, već i tabletima, mobilnim uređajima, pa čak i televizorima.

Izrada web stranice s prilagodljivim izgledom naziva se Responsive Web Design. CSS medijski upiti jedan su od najvažnijih dijelova Responsive Design-a. U ovom ćemo članku pobliže pogledati medijske upite i kako ih koristiti u CSS-u.

Ako želite, možete pogledati video verziju u nastavku:

Što je upit za medije?

Medijski upit je CSS3 značajka koja tjera web stranicu da prilagodi svoj izgled različitim veličinama zaslona i vrstama medija.

Sintaksa

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

Možemo ciljati različite vrste medija pod različitim uvjetima. Ako uvjet i / ili vrste medija ispunjavaju, tada će se primijeniti pravila unutar upita za medije, u protivnom neće.

Sintaksa se na početku može činiti složenom, pa objasnimo svaki dio jedan po jedan u detalje ...

@ Medijsko pravilo

Počinjemo definirati medijske upite s pravilom @media, a kasnije uključujemo CSS pravila unutar kovrčavih zagrada. Pravilo @ medija također se koristi za određivanje ciljnih vrsta medija.

@media () { // CSS rules }

Zagrada

Unutar zagrade postavljamo uvjet. Na primjer, želim primijeniti veću veličinu fonta za mobilne uređaje. Da bismo to učinili, moramo postaviti maksimalnu širinu koja provjerava širinu uređaja:

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

Obično će veličina teksta biti 14 piksela. Međutim, budući da smo primijenili medijski upit, promijenit će se u 16 piksela kada uređaj ima maksimalnu širinu od 480 piksela ili manje.

Važno: Uvijek stavite svoje medijske upite na kraj CSS datoteke.

Vrste medija

Ako ne primijenimo vrstu medija, pravilo @ media prema zadanim postavkama odabire sve vrste uređaja. Inače, vrste medija dolaze odmah nakon pravila @ media. Postoji mnogo vrsta uređaja, ali možemo ih grupirati u 4 kategorije:

  • sve - za sve vrste medija
  • ispis - za pisače
  • zaslon - za zaslone računala, tablete i pametne telefone
  • govor - za čitače zaslona koji stranicu "čitaju naglas"

Na primjer, kada želim odabrati samo zaslone, postavit ću ključnu riječ zaslona odmah nakon pravila @ media. Također moram povezati pravila s ključnom riječi "i":

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

Točke prijeloma

Prekidne točke su možda najčešći izraz koji ćete čuti i koristiti. Točka prijelaza ključna je za određivanje vremena promjene izgleda i prilagodbe novih pravila unutar medijskih upita. Vratimo se našem primjeru na početku:

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

Ovdje je prijelomna točka 480px. Sad medijski upit zna kada treba postaviti ili prebrisati novu klasu. U osnovi, ako je širina uređaja manja od 480px, primijenit će se klasa teksta, inače neće.

Uobičajene točke prijeloma: postoji li standardna rezolucija?

Jedno od najčešće postavljanih pitanja je "Koju točku prijelaza trebam koristiti?". Na tržištu postoji tona uređaja pa ne možemo i ne bismo trebali definirati fiksne točke prekida za svaki od njih.

Zbog toga ne možemo reći da za uređaje postoji standardna razlučivost, ali u svakodnevnom programiranju postoje neke često korištene točke prekida. Ako upotrebljavate CSS okvir (poput Bootstrapa, Bulme itd.), Također možete koristiti njihove točke prekida.

Sada ćemo vidjeti neke uobičajene točke prekida za širine uređaja:

  • 320 px - 480 px: mobilni uređaji
  • 481 px - 768 px: iPad, tableti
  • 769 px - 1024 px: mali zasloni, prijenosna računala
  • 1025px - 1200px: Stolni računari, veliki zasloni
  • 1201px i više - Izuzetno veliki zasloni, TV

Kao što sam gore rekao, te se granične točke mogu razlikovati i ne postoji točno definiran standard, ali to su neke od uobičajenih.

Završavati

Responzivni dizajn nužan je u današnjem polju web dizajna i razvoja. Upiti za medije jedan su od najvažnijih dijelova izgradnje responzivnih izgleda i nadam se da će vam moj post biti koristan za razumijevanje načina funkcioniranja medijskih upita.

Ako želite saznati više o web razvoju, slobodno se pretplatite na moj kanal.

Hvala na čitanju!