CSS medijskih upita: korak po korak opis, značajke i mišljenja

Jednom davno, oni koji posjećuju web stranice kako bi smartphone i drugi mobilni uređaji koji uzrokuju drugi samo smijati. Mnogi jednostavno nisu mogli razumjeti zašto je to potrebno, jer je takva udobne stolna računala! Ili, u najgorem slučaju, prijenosna računala. Osim toga, mobilni internet onda je skupo.

Vrijeme je prolazilo. Internet je postao jeftiniji. Prodaja je izašao više i više telefona i tableta. Nakon nekog vremena, vlasnici popularnih mjesta zbunjen grebanje glavu. Prema statističkim podacima, pokazalo se da su resursi češće posjećivati svoje smartphone nego stacionarni računalo!

U to vrijeme web stranice nisu optimizirane za pregledavanje na mobilnim uređajima. Odlazak u stari život na telefonu, te će morati biti zadovoljni s malim slovima, malim stavke izbornika i gumba neugodno.

Pojavom CSS medijske upite

Postojala je potreba da se nametne resurse, tako da oni izgledaju dobro kada se promatra s bilo kojeg zaslona. Prvo proširio praksu uspostavljanja zasebne stranice za svaku veličinu. Na primjer, posjetitelji koji koriste mobilni telefon, možete dobiti na jedan resurs, a onaj koji je „sjedi” s računalom - s druge strane. Ali to je bio dug, skup i nezgodan.

Onda je došao CSS3 medijskih upita. S njima je došao sama mogućnost provedbe dinamičnog dizajna.

Što je dinamičan dizajn?

Ovaj termin se koristi ako izgled resursa mijenja ovisno o veličini zaslona na kojem pregledavate. Kako shvatiti ovo? To je jednostavno.

Zamislite da imate web stranicu. U gornjem dijelu nalazi se izbornik za navigaciju. Horizontalna. Proteže se preko cijele širine stranice. Ispod toga je blok sa kontakt informacijama. Telefon i adresa i raspoređeni po dva bloka i postavljeni horizontalno jedna uz drugu. Prema ovom bloku - glavni sadržaj, a na lijevo ili desno je sidebar. U nastavku, kao i obično, podnožje.

Taj „klasični” izgled dijagrama. To je pogodno za osobno računalo, ali ne previše povoljno za mobilne telefone. Horizontalna meni je preširok. Kontakti se nalaze daleko jedni od drugih. Za korištenje podataka iz bočne trake i svi će imati za pomicanje zaslona, a to nije po svačijem ukusu.

Problem se može riješiti primjenom adaptivnog i mobilni dizajn s CSS3 medijskih upita. Korištenjem medijske upite, mi rekonstruirati položaj sadržaja ... Sada se to radi ovako:

• top - jedinica s okomitom izborniku navigacije;
• ispod njega - blok s kontaktima, koji su sada postavljeni okomito;
• Bočna sadržaj ne prikazuje na stranu sadržaju oznaka, a iznad njega.

Ovo je jednostavan primjer onoga što se može učiniti s responzivni web-dizajn medijske upite. Zapravo puno više mogućnosti.

Dakle, ono što je upiti medija?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Pod medijske upite CSS CSS3 razumjeti pojam modul, s kojim možete napraviti sadržaj stranice prilagoditi određenim uvjetima. Na primjer, ona počinje da odgovori na veličinu zaslona, ili uređaj orijentacije (portret / krajolik).

Kao sustav razumije da je potreba za promjenu sadržaja? Ona koristi medijske upite. Oni navesti određene parametre. Ako uređaj iz koje posjetitelj dođe na stranicu ispunjava ove parametre, uključujući stilove unaprijed recept. Oni mogu biti napisani kao totalna CSS tablice, ili u posebnoj datoteci.

CSS medijske upite za kompatibilnost preglednika

Safari до Chrome. Svi moderni preglednici podržavaju ovu tehnologiju, od Safari Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Naravno, korisnici starijih verzija Internet Explorera imati problema ... ali neka je to lice iskreno - oni koji još uvijek koriste stariji IE, gotovo sve može uzrokovati probleme.

Sintaksa adaptivni raspored Mediji Upiti

html. Možda ste bili izloženi medijskim upitima kada je spojen na stil datoteku u HTML. Zapamtite da je linija? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. = 'text / css' href = http: // stranica /article/320575/%E2%80%99style.css%E2%80%99%3E Ponekad na kraju dodaje drugi parametar, koji je izgledao kao: Mediji = „ekran”.

Ovo je medijski upit! On ukazuje da je navedena stil datoteka će raditi na uređajima opremljenim TV. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Umjesto toga, možete odrediti print screen - u ovom slučaju, stilova datoteke primjenjuju, ako se ispisuje stranice.

Možete koristiti sljedeće atribute:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; sve - univerzalna verzija, a koristi se šutnjom, primjenjuje se u svim slučajevima;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - ekrani (računala, prijenosna računala, tablete, smartphone, i sve što je opremljen zaslonom);
• принтеры; print - Pisači;
• – проекторы; Projekcija - projektor;
• – речевые браузеры; govor - govor preglednici;
• – для устройств для слабовидящих; braille - uređaje za slijepe osobe;
• – для экранов телевизоров. tv - za TV ekranima.

To nije sve. , но они используются редко. Postoji nekoliko dodatne medijske upite CSS atribute, ali oni rijetko koriste. all. Osim toga, ne navedete parametar - Zadani na sve.

Struktura medija upita

css. Umjesto stvaranja stil datoteku, možete koristiti CSS kod. To izgleda ovako:

(тут будут стили } @media zaslon i (max širine: 1024) {( postoje stilova}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Nakon @media direktivi, što ga čini jasno da je upit medija se koristi, postoje naznake o vrsti uređaja (zaslon - ekran) i dodatnih parametara. Max Width. U ovom primjeru, koristite imovinu CSS medijske upite max širine. px. To znači da su stilovi navedene u zagradama će biti uključeni, ako korisnik na veličinu zaslona uređaja od 1024 px. и and не обязательны. Zaslon i ne obvezujuće. Možete napisati ovo:

@media (max širine: 1024) {}

U takvom slučaju, svojstva koja će se koristiti na bilo kojem uređaju, a ne samo one koji su opremljeni sa TV-om.

Određivanje više parametara

Pretpostavimo da želite ograničiti raspon od nekoliko uređaja koji će se koristiti za odabir stila. px, но не больше 500 px. Recimo da želite pokazati svojstva samo oni koji posjete vaše stranice s pametnog telefona, veličina zaslona nije manja od 320 piksela, ali ne više od 500 piksela. U takvom slučaju, zahtjev ima oblik:

@media (min širina: 320) i (max širine: 500px) {}

and. Ako ste upoznati s programiranjem, što NJ znaju što operater primjenjuje i. Za one koji ne znaju: da provjerava da li su oba situacijama. E. Aktivacija svojstva u zaslonu upita ne bi trebao biti manji od 320 i ne više od 500 piksela.

and не ограничивается одним. I broj operatora nije ograničen samo na jedan. Možete ih staviti koliko god želite. Na primjer, pokušati stvoriti određene veličine ekrana za pametne telefone i sasvim drugačija - za TV.

Važna točka - orijentacija korisničkom uređaju. Netko pregledavanja web stranice na vaš smartphone u okomitom položaju, netko - s krajolikom. orientation:portrait, для вторых, соответственно, orientation:landscape. Za bivše, trebat će vam dodatni uvjet orijentaciju: portret, za drugu, odnosno, orijentacija: krajolik. @media. Te linije su također prikazani u zagradama nakon @media tima. and. Možete dijeliti ih putem i.

Još jedna zanimljiva nijansa. and вы вполне можете использовать оператор or. Umjesto toga, a vi svibanj dobro koristiti ili operatera. On treba barem jedan uvjet u zahtjevu da bi bilo istinito! Na primjer:

) {} @media (max širine: 500px) ili (orijentacija: portret) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Ako je zaslon manje od 500 piksela ili korištenje portret orijentacija, braces će stupiti na snagu stilova.

Riječ nije za fino podešavanje

not. Upit medija, možete umetnuti riječ nije. To se radi na sljedeći način:

@media (nije max širine: 700 piksela ) {}

Nekretnine se aktivirati ako je maksimalna širina nije jednaka 700 piksela.

medijske mogućnosti

Upiti se mogu koristiti nekoliko unaprijed utvrđeno funkcije. W3C. Upoznajte se sa svim što možete online W3C. Većina kodera dovoljno posjedovati tri glavna:

• (о нем мы уже говорили); orijentacije (što smo već razgovarali o tome);
• (ширина, ее тоже упоминали); Širina (širina, to je također navedeno);
• (высота). visina (visina).

Visina rijetko koristi, ali postoji nekoliko slučajeva u kojima je ova postavka može biti korisna.

Kako i gdje staviti zahtjeve?

Mnogi web dizajneri nekako ih do kraja datoteka stilova. Na primjer, prvi navodi glavne stilova, a zatim u dnu dokumenta, postavljeni zahtjevi.

To nije vrlo dobar. Mnogo više prikladan za postavljanje svojstva za različite uređaje odmah nakon glavnih stilova. Na primjer, imate div koji je postavio crvenu boju fonta:

div {

color: red;

}

Odmah nakon što je zahtjev upućuje:

@media (min širina: 320) {}

Propisuje svojstva.

Takav pristup bi bio težak, ako koristite „čista» CSS. Za pomoć preprocesora. Oni imaju puno zanimljivih mogućnosti za preciznije primjena zahtjeva.

Druga mogućnost - stavljanje svojstva za različite uređaje u različitim stilskim datoteka. To je osobito korisno ako koristite Preprocessoru direktivu uvesti. Rezultat je jednostavan za uređivanje, čisti kod.

Koji koristiti? To sve ovisi o osobnim preferencijama i karakteristike tima. Možda, na mjestu svog rada ima određeni način postavljanja medijske upite će biti prihvaćen.

Također ne zaboravite da možete pojednostaviti svoj život s najnovijim softverom. To je ne samo o predprocesoru. Uz gutljaj grupe CSS medijskim upitima može napraviti proces mnogo lakše. Preporučeni svladati ovaj alat ili bilo koji od njegovih analoga.