Sintaxa pentru interogări media min-lățime și maximă
Responsabilitatea web design-ului este o abordare a construirii paginilor web în cazul în care aceste pagini pot schimba dinamic aspectul și aspectul lor pe baza dimensiunii unui ecran al vizitatorului . Ecranele mari pot primi un aspect potrivit pentru afișajele mai mari, în timp ce dispozitivele mai mici, cum ar fi telefoanele mobile, pot primi același site formatat într-un mod adecvat pentru ecranul mai mic. Această abordare oferă o experiență mai bună utilizatorilor pentru toți utilizatorii și poate ajuta chiar la îmbunătățirea clasamentului motorului de căutare . O parte importantă a designului web receptiv este CSS Media Queries.
Interogările media sunt ca mici declarații condiționale în fișierul CSS al site-ului dvs. web, permițându-vă să setați anumite reguli CSS care vor afecta doar o dată când o anumită condiție este îndeplinită - cum ar fi atunci când o dimensiune a ecranului este deasupra sau sub anumite praguri.
Întrebări media în acțiune
Deci, cum folosiți Media Queries pe un site web? Iată un exemplu foarte simplu:
- Ați începe cu un document HTML bine structurat, fără stiluri vizuale (ceea ce este pentru CSS)
- În fișierul dvs. CSS, ați începe în modul pe care îl faceți în mod normal, prin modelarea paginii și stabilirea unei linii de bază pentru modul în care va arăta site-ul web. Spuneți că doriți ca dimensiunea fontului paginii să fie de 16 pixeli, puteți scrie acest CSS: body {font-size: 16px; }
- Acum, poate doriți să măriți mărimea fontului pentru ecrane mai mari, care au proprietăți imense pentru a face acest lucru. Acesta este locul în care interoghează Media Queries. Ați începe un Media Query astfel: ecranul @media și (min-width: 1000px) {}
- Aceasta este sintaxa unui Media Query. Începe cu @media pentru a stabili Media Query în sine. Apoi setați "tipul de suport", care în acest caz este "ecran". Acest lucru se aplică ecranelor computerelor desktop, tabletelor, telefoanelor etc. În cele din urmă, închideți Media Query cu "caracteristica media". În exemplul nostru de mai sus, care este "mid-width: 1000px". Aceasta înseamnă că Media Query va afișa afișaje cu o lățime minimă de 1000 de pixeli.
- După aceste elemente din Media Query, adăugați o breșă de deschidere și de închidere asemănătoare cu ceea ce ați face în orice regulă CSS normală.
- Pasul final către o interogare media este să adăugați regulile CSS pe care doriți să le aplicați după ce această condiție este îndeplinită. Adăugați aceste reguli CSS între acoladele curbate care alcătuiesc Media Query, cum ar fi: ecranul @media și (min-width: 1000px) {body {font-size: 20px; }
- Când condițiile din Media Query sunt îndeplinite (fereastra browserului are o lățime de cel puțin 1000 de pixeli), acest stil CSS va intra în vigoare, schimbând dimensiunea fontului site-ului nostru de la cei 16 pixeli pe care i-am stabilit inițial la noua noastră valoare de 20 de pixeli.
Adăugarea mai multor stiluri
Ați putea plasa cât mai multe reguli CSS în acest Media Query după cum este necesar pentru a ajusta aspectul vizual al site-ului dvs. De exemplu, dacă doriți să nu creșteți doar dimensiunea fontului la 20 de pixeli, dar și să schimbați culoarea tuturor paragrafelor în negru (# 000000), puteți adăuga aceasta:
Ecranul @media și (min-width: 1000px) {body {font-size: 20px; } p {culoare: # 000000; }}Adăugarea mai multor interogări media
În plus, puteți adăuga mai multe interogări media pentru fiecare dimensiune mai mare, adăugându-le în foaia dvs. de stil, după cum urmează:
Ecranul @media și (min-width: 1000px) {body {font-size: 20px; } p {culoare: # 000000; {} ecranul @media și (min-width: 1400px) {body {font-size: 24px; }}Primele interogări media ar lovi cu o lățime de 1000 de pixeli, schimbând dimensiunea fontului la 20 de pixeli. Apoi, odată ce browserul era de peste 1400 de pixeli, dimensiunea fontului s-ar schimba din nou la 24 de pixeli. Puteți adăuga cât mai multe interogări Media ca fiind necesare pentru site-ul dvs. particular.
Min-Lățime și Lățime maximă
Există, în general, două modalități de scriere a interogărilor media - utilizând "min-width" sau "max-width". Până acum, am văzut "min-width" în acțiune. Acest lucru determină ca interogările media să aibă efect odată ce un browser a atins cel puțin această lățime minimă. Deci, o interogare care utilizează "min-width: 1000px" se va aplica când browserul are o lățime de cel puțin 1000 de pixeli. Acest stil de Media Query este folosit atunci când construiți un site într-o manieră "în primul rând mobil".
Dacă utilizați "max-width", funcționează în mod opus. O interogare media cu "max-width: 1000px" se va aplica odată ce browserul a căzut sub această dimensiune.
În ceea ce privește browserele mai vechi
O provocare cu Media Queries este lipsa lor de sprijin în versiunile mai vechi în Internet Explorer. Din fericire, sunt disponibile dispozitive de tip polyfill care pot suporta suportul pentru Media Queries în acele browsere mai vechi, permițându-le să le utilizați pe site-urile web astăzi, asigurându-vă în același timp că afișarea acelui site nu pare a fi ruptă în software-ul de navigare mai vechi.
Editat de Jeremy Girard pe 1/24/17