Interogări Media CSS
Paginile web responsive depind de interogările media, care aplică stiluri în funcție de caracteristicile dispozitivului sau ale mediului care afișează pagina.
Pentru a le adăuga într-o foaie de stiluri, scrii regula @media.
Sintaxa Interogării Media
Orice interogare media are una sau mai multe caracteristici media, fiecare rezolvându-se la true sau false, și poate avea și un tip de media. Tipul de media poate fi omis, cu excepția cazului în care folosești not, care îl cere.
Interogarea în ansamblu este adevărată când tipul de media corespunde tipului de dispozitiv și toate caracteristicile media sunt adevărate. Regulile ei de stil se aplică atunci, respectând regulile normale de cascadare.
not: Un cuvânt cheie opțional care inversează sensul întregii interogări.
and: Cuvântul cheie care leagă un tip de media de una sau mai multe caracteristici media.
Sintaxa interogării media
Forma generală a unei reguli de interogare media, așa cum ai scrie-o.
@media [not] media-type and (media-feature: value)
and (media-feature: value) {
/* CSS rules to apply */
}
Tipuri de Media CSS
Un tip de media numește felul de mediu căruia îi sunt destinate stilurile. Este opțional, iar dacă îl omiți înseamnă all.
all— Acoperă toate tipurile de dispozitive media.print— Se aplică în modul de previzualizare a imprimării.screen— Se aplică ecranelor de calculator, tabletelor și smartphone-urilor.
Caracteristici Media CSS
Fiecare caracteristică media testează o anumită particularitate a dispozitivului. Acestea sunt printre cele mai folosite:
max-height— Înălțimea maximă a viewport-ului.min-height— Înălțimea minimă a viewport-ului.height— Înălțimea viewport-ului, inclusiv bara de derulare.max-width— Lățimea maximă a viewport-ului.min-width— Lățimea minimă a viewport-ului.width— Lățimea viewport-ului, inclusiv bara de derulare.orientation— Dacă viewport-ul este în modul peisaj sau portret.resolution— Rezoluția ecranului.prefers-color-scheme— Schema de culori (deschisă sau întunecată) preferată de utilizator.
Exemple de Interogări Media
Culoare de fundal cu min-width
Odată ce viewport-ul ajunge la 480px sau mai mult, această interogare media schimbă culoarea de fundal a body-ului în verde deschis.
@media screen and (min-width: 480px).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Min-Width</title>
<style>
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The background color will be lightgreen when the viewport is 480 pixels wide or wider.</p>
</body>
</html>
Culoare de fundal cu min și max-width
Aici, culoarea de fundal a body-ului este verde deschis doar cât timp lățimea viewport-ului rămâne între 480px și 768px.
@media screen and (min-width: 480px) and (max-width: 768px).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Min and Max Width</title>
<style>
@media screen and (min-width: 480px) and (max-width: 768px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The background color will be lightgreen when the viewport is between 480 and 768 pixels wide.</p>
</body>
</html>