Astăzi vom vorbi despre CSS3, sau, mai degrabă, aspectul adaptiv. Am vorbit despre aspectul adaptiv propriu-zis într-un articol anterior. În acest articol, vom examina ce instrumente CSS3 pot utiliza pentru a produce o astfel de marcare.
De fapt, există mai multe opțiuni pentru stabilirea unor astfel de reguli și fiecare persoană alege acelea care îi plac. Să ne uităm la ele.
Conectarea fișierelor suplimentare CSS3
O opțiune este să adăugați reguli suplimentare CSS3:
După cum puteți vedea din acest exemplu, vedem conexiunea a trei fișiere CSS. În primul caz, stil.css conține stilurile de bază, știrile conțin stilurile paginilor interne ale site-ului și stilurile de profil ale secțiunii de profil. Pur și simplu, prin accesarea paginii principale a site-ului, browserul va descărca stil.css. Dacă mergeți la profil, profile.css va fi încărcat.
Fiți atenți la mass-media = "toate". Acest parametru spune că stilurile din aceste CSS vor fi aplicate tuturor dispozitivelor, indiferent de dispozitivul în sine și de dimensiunea ecranului. Cum obținem site-ul nostru să se adapteze rezoluției solicitate?
Dacă vă uitați atent la acest cod, veți vedea că media = "all" sa schimbat la media = "ecran și (min-width: 600px)". Aceasta este regula care va conecta versiunea mobilă a pad.css. În cazul nostru, condiția ar trebui să fie o rezoluție a ecranului egală sau mai mare de 600 de pixeli. De asemenea, puteți utiliza opțiunea pentru lățimea maximă. În acest caz, specificăm rezoluția maximă a ecranului și CSS va fi încărcat dacă rezoluția ecranului este de până la valoarea setată.
Apropo, pentru produsele Apple aveți nevoie de codul dvs.:
Se pare că totul este frumos și clar, pentru fiecare dispozitiv pe care îl scriu propriile stiluri și CSS este încărcat cu ajutorul media = "ecran și" (min-width: specified.px) ". Cu toate acestea, multe stiluri mici - o mulțime de apeluri la server. Și aceasta poate fi o problemă pentru site-urile descărcate. Iar specificația pentru webmasteri spune că este mai bine să folosiți un fișier CSS.
Direcția @import este o altă modalitate de a conecta foile de stil cascadă. @import este o direcție foarte interesantă. Acesta vă permite să utilizați parametrul link-ului nu în HTML, ci în CSS. Ce înseamnă asta. Ne-am dat seama deja că nu ar trebui să distrugeți legăturile de cap ca o legătură. Acum, având un CSS conectat prin tipul de link, specificați parametrul @import în el, de exemplu:
Adică, puteți include CSS suplimentar în CSS în sine. De exemplu, prin introducerea celei de-a doua linii în CSS, va trebui să conectați CSS la iPad. În același timp, se îmbină cu un CSS. Dar chiar și aici nu a fost fără o lingură de gudron. De fapt, @import este un link de înlocuire, nu HTML, ci CSS. Și aceasta înseamnă că vor exista în continuare cereri suplimentare către server, ca și în cazul numărului N de fișiere CSS. Dar cea mai importantă problemă este că @import acceptă tipul de media, de exemplu: proiecție, tv, ecran. Deci, nu numai că IE nu înțelege @importul deloc, deci nu-l încarcă deloc pe CSS dacă este un tip media.
Ei bine, și ultimul, după părerea mea, modul razei pentru aspectul adaptabil, este regula CSS - @media sau Media Queries. Folosind interogările media, puteți crea un aspect adaptiv, fără a mai fi nevoie să conectați CSS suplimentar. Se pare ca aceasta:
Dragi cititori! Dacă găsiți o eroare în text, nu fi leneș, selectați cuvântul și apăsați CTRL + Enter. Să facem limba mai curată!