Exemple de media queries CSS
Livrarea de stiluri diferite pentru dispozitive diferite este o utilizare populară a media queries. Regulile CSS pot depinde astfel de caracteristicile dispozitivului, printre care lățimea viewport-ului.
Exemplu
Aici, culoarea de fundal se schimbă pe măsură ce se schimbă lățimea viewport-ului.
Prompt
Creează o pagină care folosește media queries pentru a schimba culoarea de fundal a corpului paginii la diferite lățimi de viewport: olive pentru mobil, blue la 768px și tan la 992px. Include text alb pentru primele două și text negru pentru ultima.
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>Background Color Breakpoints</title>
<style>
body {
background-color: olive;
color: white;
}
@media screen and (min-width: 768px) {
body {
background-color: blue;
color: white;
}
}
@media screen and (min-width: 992px) {
body {
background-color: tan;
color: black;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The background color will change at different viewport widths.</p>
</body>
</html>
Media queries pentru coloane
Aspectele flexibile sunt o altă utilizare comună. În funcție de dimensiunea ecranului, aspectul de aici alternează între patru coloane, două coloane și coloane pe toată lățimea.
Capitolul CSS Flexbox explică mai în detaliu modulul Flexible Box Layout.
Pentru mai multe despre Responsive Web Design, vezi Tutorialul de Responsive Web Design.
Exemplu
Prompt
Creează o pagină cu patru coloane de lățime egală folosind flexbox. Folosește media queries astfel încât coloanele să devină câte două pe rând la 992px sau mai puțin și să se stivuiască într-o singură coloană la 600px sau mai puțin. Fiecare coloană trebuie să conțină niște text de exemplu.
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>Flexible Columns Layout</title>
<style>
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 25%;
padding: 20px;
}
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout</h2>
<p>Resize the browser window to see the responsive effect.</p>
<div class="container">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text inside the first column.</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text inside the second column.</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text inside the third column.</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text inside the fourth column.</p>
</div>
</div>
</body>
</html>
Media queries pentru meniuri
Și un meniu de navigare poate deveni responsive, cu un design care se adaptează la fiecare dimensiune de ecran prin media queries.
Exemplu
Prompt
Creează un meniu de navigare orizontal folosind o listă neordonată și flexbox. Stilizează linkurile cu text alb pe un fundal închis la culoare (#333). Folosește un media query pentru a stivui elementele meniului vertical când viewport-ul 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>Responsive Navigation Menu</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
@media screen and (max-width: 600px) {
ul {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Navigation Menu</h2>
<p>Resize the browser window to see the effect.</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Ascunderea elementelor cu media queries
Ecranele mici s-ar putea să nu aibă nevoie de toate elementele, iar un media query le poate ascunde pe cele de care nu au nevoie.
Exemplu
Prompt
Creează o pagină cu un element div stilizat care este ascuns când lățimea viewport-ului este de 600px sau mai puțin, folosind un media query cu display: none.
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 Element With Media Query</title>
<style>
#div1 {
background-color: lightgreen;
padding: 20px;
font-size: 20px;
}
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}
</style>
</head>
<body>
<h2>Hide Elements on Small Screens</h2>
<p>Resize the browser window. The green box will be hidden at 600px or less.</p>
<div id="div1">I will be hidden on small screens.</div>
</body>
</html>
Schimbarea dimensiunii fontului cu media queries
Și dimensiunea fontului unui element poate urma lățimea viewport-ului, printr-un media query.
Exemplu
Prompt
Creează o pagină cu un element div a cărui dimensiune a fontului se schimbă la 80px când lățimea viewport-ului este de 600px sau mai mult, folosind un media query cu min-width.
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 Query</title>
<style>
#div1 {
font-size: 20px;
}
@media screen and (min-width: 600px) {
#div1 {
font-size: 80px;
}
}
</style>
</head>
<body>
<h2>Change Font Size</h2>
<div id="div1">Resize the browser window to see the font size change.</div>
</body>
</html>
Media queries pentru orientarea ecranului
Orientarea ecranului este o altă condiție la care poate răspunde un media query, ajustând corespunzător aspectul paginii.
Exemplu
Cât timp ecranul este în orientare peisaj, body primește o altă culoare de fundal.
Prompt
Creează o pagină care folosește un media query pentru a schimba culoarea de fundal a corpului paginii în lightblue când orientarea ecranului este de tip 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>Screen Orientation Media Query</title>
<style>
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<h2>Screen Orientation</h2>
<p>The background color will be lightblue when the screen is in landscape mode.</p>
</body>
</html>
Media queries pentru preferințele utilizatorului
Animația poate fi o problemă pentru persoanele cu sensibilitate la mișcare, care preferă site-urile web cu mai puțină animație.
Pentru a afla dacă un utilizator a cerut mișcare redusă, de exemplu mai puține animații sau tranziții, verifică caracteristica media prefers-reduced-motion. Când această setare este activă pe calculatorul lui, poți dezactiva animațiile.
Exemplu
Prompt
Creează o pagină care folosește caracteristica media prefers-reduced-motion pentru a dezactiva toate animațiile și tranzițiile atunci când utilizatorul a solicitat mișcare redusă.
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>Prefers Reduced Motion</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: coral;
animation: slide 2s infinite alternate;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(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 animation below will be disabled.</p>
<div class="box"></div>
</body>
</html>
Galerie de imagini responsive
Combinând flexbox cu media queries, obții o galerie de imagini responsive.
Exemplu
Prompt
Creează o galerie de imagini responsivă folosind flexbox și media queries. Afișează patru imagini pe rând pe ecrane mari, două pe rând pe ecrane medii (sub 800px) și una pe rând pe ecrane mici (sub 600px). Folosește imagini de tip placeholder.
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>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
width: 100%;
padding: 5px;
}
.gallery-item {
flex: 25%;
padding: 5px;
}
@media screen and (max-width: 800px) {
.gallery-item {
flex: 50%;
}
}
@media screen and (max-width: 600px) {
.gallery-item {
flex: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<p>Resize the browser window to see the responsive effect.</p>
<div class="gallery">
<div class="gallery-item">
<img src="img_5terre.jpg" alt="Cinque Terre">
</div>
<div class="gallery-item">
<img src="img_forest.jpg" alt="Forest">
</div>
<div class="gallery-item">
<img src="img_lights.jpg" alt="Northern Lights">
</div>
<div class="gallery-item">
<img src="img_mountains.jpg" alt="Mountains">
</div>
</div>
</body>
</html>
Site web responsive
Aceeași combinație de flexbox și media queries poate organiza un întreg site web responsive.
Exemplu
Prompt
Creează un layout de site web responsiv cu un antet, o bară de navigare, o zonă de conținut principal cu o coloană laterală și un subsol. Folosește flexbox și media queries astfel încât layout-ul să se stivuiască vertical pe ecrane mici (sub 600px).
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>Responsive Website</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
.navbar {
display: flex;
background-color: #555;
}
.navbar a {
color: white;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #333;
}
.row {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
}
@media screen and (max-width: 600px) {
.navbar, .row {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<p>Some text about me in a side column.</p>
</div>
<div class="main">
<h2>Title</h2>
<p>Some text about the main content.</p>
<p>More text to fill the main area.</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>