Media queries CSS
Paginile web responsive se bazează pe media queries, care aplică stiluri în funcție de caracteristicile dispozitivului sau ale mediului care afișează pagina.
Acestea se adaugă într-o foaie de stiluri prin regula CSS @media.
Folosirea Media Queries pentru a adăuga un punct de întrerupere
Pe pagina anterioară a fost construită o pagină web cu aspect de grilă. Acum are nevoie de un punct de întrerupere, pentru ca un media query să îi poată rearanja elementele grilei pe ecrane mai mari.
Exemplu
Media query-ul din acest exemplu setează un punct de întrerupere la 600px:
Prompt
Creați o pagină cu aspect de tip grilă responsivă cu un antet, meniu, conținut, bară laterală de fapte și subsol. Implicit (pe mobil), toate elementele se stivuiesc într-o singură coloană. Adăugați un media query la 600px min-width care rearanjează elementele într-o grilă cu 6 coloane: antetul se întinde pe toate 6, meniul pe 1, conținutul pe 4, faptele pe 1, subsolul pe toate 6.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add a Breakpoint</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; }
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.header { background-color: #2196F3; color: white; padding: 15px; text-align: center; }
.menu { background-color: #33b5e5; color: white; padding: 15px; }
.content { background-color: #f1f1f1; padding: 15px; }
.facts { background-color: #ccc; padding: 15px; }
.footer { background-color: #2196F3; color: white; padding: 15px; text-align: center; }
.menu ul { list-style-type: none; padding: 0; }
.menu li { padding: 8px 0; }
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(6, 1fr);
}
.header { grid-column: 1 / span 6; }
.menu { grid-column: 1 / span 1; }
.content { grid-column: 2 / span 4; }
.facts { grid-column: 6 / span 1; }
.footer { grid-column: 1 / span 6; }
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header"><h1>Header</h1></div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="content">
<h2>The City</h2>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
<div class="facts">
<h2>Facts</h2>
<p>Chania was founded in 1252.</p>
</div>
<div class="footer"><p>Footer</p></div>
</div>
</body>
</html>
Alt punct de întrerupere
Numărul punctelor de întrerupere nu este limitat, așa că poți adăuga câte vrei.
Exemplu
Aceste media queries adaugă două puncte de întrerupere, unul pentru ecrane de cel puțin 600px și unul pentru ecrane de cel puțin 768px:
Prompt
Creați un aspect de tip grilă responsivă cu secțiuni de antet, meniu, conținut, fapte și subsol. Folosiți două puncte de întrerupere media query: la 600px, rearanjați într-o grilă în care meniul are 1 coloană, conținutul are 4 coloane, iar faptele merg pe rândul propriu, întinzându-se pe toate 6; la 768px, mutați faptele lângă conținut (1 coloană) astfel încât meniul, conținutul și faptele să împartă același rând.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Another Breakpoint</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; }
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.header { background-color: #2196F3; color: white; padding: 15px; text-align: center; }
.menu { background-color: #33b5e5; color: white; padding: 15px; }
.content { background-color: #f1f1f1; padding: 15px; }
.facts { background-color: #ccc; padding: 15px; }
.footer { background-color: #2196F3; color: white; padding: 15px; text-align: center; }
.menu ul { list-style-type: none; padding: 0; }
.menu li { padding: 8px 0; }
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(6, 1fr);
}
.header { grid-column: 1 / span 6; }
.menu { grid-column: 1 / span 1; }
.content { grid-column: 2 / span 4; }
.facts { grid-column: 1 / span 6; }
.footer { grid-column: 1 / span 6; }
}
@media (min-width: 768px) {
.header { grid-column: 1 / span 6; }
.menu { grid-column: 1 / span 1; }
.content { grid-column: 2 / span 4; }
.facts { grid-column: 6 / span 1; }
.footer { grid-column: 1 / span 6; }
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header"><h1>Header</h1></div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="content">
<h2>The City</h2>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
<div class="facts">
<h2>Facts</h2>
<p>Chania was founded in 1252.</p>
</div>
<div class="footer"><p>Footer</p></div>
</div>
</body>
</html>
Puncte de întrerupere tipice pentru dispozitive
Există atât de multe ecrane și dispozitive cu înălțimi și lățimi diferite, încât este greu de creat un punct de întrerupere exact pentru fiecare. Dacă vizezi cinci grupuri comune, lucrurile rămân simple.
Exemplu
Prompt
Creați o pagină care demonstrează punctele de întrerupere responsive tipice, schimbând culoarea de fundal a body-ului la cinci lățimi comune: 600px și mai puțin (extra mic), 600px și mai mult (mic), 768px și mai mult (mediu), 992px și mai mult (mare) și 1200px și mai mult (extra mare). Afișați un text care indică intervalul de dimensiune curent.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typical Device Breakpoints</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 40px;
}
.size-label { font-size: 30px; }
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
body { background-color: lightcoral; }
.size-label::after { content: "Extra Small (600px and down)"; }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
body { background-color: lightsalmon; }
.size-label::after { content: "Small (600px and up)"; }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
body { background-color: lightyellow; }
.size-label::after { content: "Medium (768px and up)"; }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
body { background-color: lightgreen; }
.size-label::after { content: "Large (992px and up)"; }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
body { background-color: lightblue; }
.size-label::after { content: "Extra Large (1200px and up)"; }
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p class="size-label"></p>
</body>
</html>
Media queries pentru orientarea ecranului
Aspectul unei pagini poate răspunde și la orientarea ecranului, prin media queries.
În modul peisaj, în acest exemplu se schimbă culoarea de fundal a body-ului:
Exemplu
Prompt
Creați o pagină care folosește un media query pentru a schimba culoarea de fundal a body-ului în albastru deschis atunci când orientarea ecranului este modul peisaj.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orientation Media Query</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width is greater than the height (landscape mode), the background color will be lightblue.</p>
</body>
</html>
Ascunderea elementelor cu media queries
Pe ecranele mici, media query-ul de mai jos ascunde un element:
Exemplu
Prompt
Creați o pagină cu un element div care conține textul „Voi fi ascuns pe ecranele mici.” Folosiți un media query pentru a ascunde acest element atunci când lățimea ferestrei de vizualizare este de 600px sau mai puțin.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Elements With Media Queries</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#div1 {
background-color: lightgreen;
padding: 20px;
font-size: 24px;
}
/* Hide element if the viewport width is 600px or less */
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}
</style>
</head>
<body>
<div id="div1">I will be hidden on small screens.</div>
<p>Resize the browser window to hide the green box when the width is 600px or less.</p>
</body>
</html>
Schimbarea dimensiunii fontului cu media queries
Pe măsură ce se schimbă lățimea ferestrei de vizualizare, media query-ul de mai jos ajustează dimensiunea fontului unui element:
Exemplu
Prompt
Creați o pagină cu un element div care conține un text. Folosiți un media query pentru a schimba dimensiunea fontului acelui element la 80px atunci când lățimea ferestrei de vizualizare este de 600px sau mai mult.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Font Size With Media Queries</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#div1 {
background-color: lightblue;
padding: 20px;
}
/* If viewport width is 600px or more, set font-size to 80px */
@media screen and (min-width: 600px) {
#div1 {
font-size: 80px;
}
}
</style>
</head>
<body>
<div id="div1">Hello World</div>
<p>Resize the browser window to see the font size change at 600px.</p>
</body>
</html>
Media queries pentru preferințele utilizatorului
Persoanele cu sensibilitate la mișcare tind să prefere site-urile web cu mai puțină animație.
Dacă un utilizator a cerut mișcare redusă, de exemplu mai puține animații sau tranziții, se poate verifica prin caracteristica media prefers-reduced-motion. Dacă această setare este activă pe calculatorul lui, această caracteristică îți permite să dezactivezi animațiile și tranzițiile.
Exemplu
Prompt
Creați o pagină cu un element animat (de exemplu, o casetă care se mișcă pe ecran). Adăugați un media query prefers-reduced-motion care dezactivează toate animațiile și tranzițiile atunci când utilizatorul a solicitat mișcare redusă în setările sistemului.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reduced Motion Media Query</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: coral;
position: relative;
animation: moveBox 3s infinite alternate;
}
@keyframes moveBox {
from { left: 0; }
to { left: 300px; }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h2>Prefers Reduced Motion</h2>
<p>If you have "reduce motion" enabled in your system settings, the box below will not animate.</p>
<div class="box"></div>
</body>
</html>