`@media` e Design Responsivo
Questo articolo spiega @media e il design responsivo.
Imparerai come creare layout flessibili attraverso la sintassi di base ed esempi d'uso di @media.
YouTube Video
HTML per Anteprima
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>Regole @media
@media è una regola per utilizzare le media query CSS e applicare stili in base a condizioni specifiche. Consente di applicare CSS diversi in base alla dimensione dello schermo del dispositivo, all'orientamento, alla risoluzione o ad altre caratteristiche. Principalmente utilizzato per il design responsivo, aiuta ad adattare l'aspetto su dispositivi diversi come desktop, tablet e cellulari.
Sintassi di Base
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- In
media-type, specificare il tipo di media (ad esempio,screen,print). - In
condition, specificare condizioni come la dimensione dello schermo o la risoluzione.
Tipi di Media
- screen: Stili per la visualizzazione su schermo, come su computer e smartphone.
- print: Questo è lo stile applicato per la stampa.
- all: Questo è lo stile applicato a tutti i media.
Condizioni Comunemente Usate
- min-width / max-width: Applicare stili secondo la larghezza minima/massima dello schermo.
- min-height / max-height: Applicare stili secondo l'altezza minima/massima dello schermo.
- orientation: Specificare l'orientamento dello schermo (
portraitper verticale,landscapeper orizzontale). - resolution: Applicare stili secondo la risoluzione dello schermo (ad esempio, DPI).
Esempio di utilizzo
Cambiamenti di stile basati sulla larghezza dello schermo
Ad esempio, per specificare gli stili applicati quando la larghezza dello schermo è inferiore a 600 pixel, puoi scriverlo così:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- Su dispositivi con una larghezza dello schermo di 600px o meno, il colore di sfondo cambia in azzurro chiaro e la dimensione del font nei paragrafi diventa 14px.
Stili basati sull'orientamento dello schermo
Per applicare stili quando il dispositivo è in orientamento orizzontale, puoi scriverlo così:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Quando lo schermo è in modalità orizzontale, il colore di sfondo diventa verde chiaro.
3. Esempio di combinazione di condizioni multiple
Puoi combinare più condizioni con and per applicare stili a condizioni più specifiche.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Se la larghezza dello schermo è compresa tra 768px e 1024px, il colore di sfondo cambia in grigio chiaro.
Esempio di Applicazione: Design Responsivo
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}Nel design responsivo, è comune applicare layout diversi in base alla larghezza dello schermo.
- Le dimensioni dei caratteri cambiano su dispositivi mobili (600px o meno), tablet (da 601px a 1024px) e desktop (1025px o più).
Riepilogo
@media è uno strumento potente per cambiare gli stili CSS in base ai dispositivi e alle dimensioni dello schermo, ed è essenziale per il design responsivo. Utilizzando abilmente condizioni come min-width e max-width, puoi creare un sito web ottimizzato per diversi dispositivi.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.