Dispozitiv media - cum să schimbe stilul în funcție de rezoluția ecranului
În acest articol ne uităm la modul în care să se conecteze utilizând parametrii @media stiluri CSS si schimba stilul de pagini de afișare pentru diferite tipuri de dispozitive cu altă rezoluție (lățime) a ecranului.
Tipuri de dispozitive @media
În total există 10 tipuri de dispozitive media:
Cum se schimba stilul atunci când schimbă lățimea ecranului pentru o varietate de dispozitive media
Metode de conectare de stiluri CSS:
Cel mai comun mod de a conecta stiluri - adăugarea în secțiunea HEAD a codului:
pentru toate sau numai pentru monitoare:
A doua metodă de conectare folosind import (@import) foaia de stil în secțiunea HEAD:
Cum de a schimba stilul CSS pentru dispozitive media cu rezoluție diferită (lățimea ecranului)
Pentru a schimba stilul de afișare pagina pe dispozitive cu diferite lățime (dimensiune) a parametrilor de ecran sunt media utilizate. min lățime și max-lățime.
Ele pot fi folosite în secțiunea HEAD a paginii
acest lucru ne-am definit foaie de stil pentru toate tipurile și pentru dispozitive cu o rezoluție de 1280px și mai mult. Posibil, astfel încât să se stabilească intervalul de lățimea ecranului pentru a fi acoperite anumit stil de:
În plus, defini stiluri pentru dispozitivele pot fi în lista de stiluri cu tipul de mass-media: toate adăugarea la partea de jos a instrucțiunilor sale pentru fiecare dispozitiv:
imprimare @media<
#sidebar
#content> // stil pentru imprimarea unui document, bara laterală ascuns și de conținut este extins la întreaga pagină
@media (max-width: 799px) și (min-lățime: 300px) <
#content
#sidebar> // stil pentru telefoane mobile și iPad, cu o rezoluție de 300 la 799px, conținutul este extins la întreaga pagină și conținutul Sidebar este plasat sub
@media (min-lățime: 1279px) #page> // pentru monitoare cu rezoluție de ecran mai mare decât 1280px am interzis întinde designul site-ului nostru este 1240px de cauciuc mai larg
Întrebați de ce aceste instrucțiuni pentru a adauga in jos foi de stil - la aceste instrucțiuni pentru fiecare tip de stil rerecorded specificate pentru elementele din partea principală a documentului CSS.