Rezultate pentru tag: punctul

CSS Responsive Web Design - Interogări media

Responsive Web Design - Interogări media
Ce este o interogare media?
Interogarea media este o tehnică CSS introdusă în CSS3.
Utilizează regula @media pentru a include un block de proprietăți CSS numai dacă o anumită condiție este adevărată.
Dacă fereastra browserului este de 600px sau mai mică, culoarea de fundal (background color) va fi deschisă la culoare (lightblue).
Adăugați un Breakpoint
Mai devreme în acest tutorial am făcut o pagină web cu rânduri și coloane și a fost responzive, dar nu arăta bine pe un ecran mic.
Interogările media (media queries) vă pot ajuta. Putem adăuga un punct de break (breakpoint) unde anumite părți ale designelui se vor comporta diferit pe fiecare parte a punctului de break (breakpoint).
Utilizați o interogare media (media queries) pentru a adăuga un punct de break (breakpoint) la 768px:
Când ecranul (fereastra browserului) devine mai mic decât 768px, fiecare coloană ar trebui să aibă o lățime de 100%.
Întotdeauna design pentru mobil întâi
Mobile First înseamnă proiectare pentru mobil înainte de proiectare pentru desktop sau orice alt dispozitiv (Acest lucru va face afișarea paginii mai rapidă pe dispozitive mai mici).
Aceasta înseamnă că trebuie să facem unele modificări în CSS-ul nostru.
În loc să schimbăm stilurile când lățimea devine mai mică de 768px, ar trebui să schimbăm designul când lățimea devine mai mare de 768px. Acest lucru va face în primul rând proiectarea noastră mobilă.
Puteți adăuga câte breakpoints doriți.
Vom insera, de asemenea, un punct de break (breakpoint) între tablete și telefoane mobile.
Facem acest lucru prin adăugarea a încă o interogare media (media query ) (la 600px) și un set de clase noi pentru dispozitive mai mari de 600px (dar mai mici decât 768px):
Rețineți că cele două seturi de clase sunt aproape identice, singura diferență este denumirea (col- și col-s-).
Breakpoints tipice dispozitivului (Typical Device Breakpoints)
Există tone de ecrane și dispozitive cu înălțimi și lățimi diferite, așa că este greu să creezi un punct de break (breakpoint) exact pentru fiecare dispozitiv. Pentru a menține lucrurile simple, puteți viza cinci grupuri.
Orientare: Portret / Peisaj (Landscape)
Interogările media (media queries) pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.
Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Lanscape):
Pagina web va avea un fundal luminos (lightblue background) dacă orientarea este în modul peisaj (lanscape).
Ascundeți elementele cu interogări media (Hide Elements With Media Queries)
O altă utilizare obișnuită a interogărilor media (media queries) este de a ascunde elemente pe dimensiuni diferite de ecran.
Modificați dimensiunea fontului cu interogări media (Change Font Size With Media Queries)
De asemenea, puteți utiliza interogări media (media queries) pentru a modifica dimensiunea fontului unui element pe diferite dimensiuni ale ecranului.