`@media` och responsiv design
Den här artikeln förklarar @media och responsiv design.
Du kommer att lära dig hur man skapar flexibla layouter genom grundläggande syntax och användningsexempel på @media.
YouTube Video
HTML för förhandsgranskning
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>@media-regler
@media är en regel för att använda CSS-medieförfrågningar för att tillämpa stilar baserat på specifika villkor. Detta gör det möjligt att tillämpa olika CSS beroende på enhetens skärmstorlek, orientering, upplösning eller andra egenskaper. Används främst för responsiv design och hjälper till att justera utseendet på olika enheter som datorer, surfplattor och mobiler.
Grundläggande syntax
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- I
media-type, specificera typen av media (t.ex.screen,print). - I
condition, specificera villkor som skärmstorlek eller upplösning.
Mediatyper
- screen: Stilar för skärmar, exempelvis på datorer och smartphones.
- print: Den här stilen tillämpas för utskrift.
- all: Den här stilen tillämpas på alla medier.
Vanligt använda villkor
- min-width / max-width: Tillämpa stilar enligt skärmens minsta/största bredd.
- min-height / max-height: Tillämpa stilar enligt skärmens minsta/största höjd.
- orientation: Specificera skärmens orientering (
portraitför vertikal,landscapeför horisontell). - resolution: Tillämpa stilar enligt skärmens upplösning (t.ex. DPI).
Exempel på användning
Stilförändringar baserade på skärmbredd
Till exempel, för att specificera stilar som tillämpas när skärmbredden är mindre än 600 pixlar, kan du skriva det så här:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- På enheter med en skärmbredd på 600px eller mindre ändras bakgrundsfärgen till ljusblå och paragrafens teckenstorlek blir 14px.
Stilar baserade på skärmens orientering
För att tillämpa stilar när enheten är i liggande läge kan du skriva det så här:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- När skärmen är i liggande läge ändras bakgrundsfärgen till ljusgrön.
3. Exempel på att kombinera flera villkor
Du kan kombinera flera villkor med and för att tillämpa stilar på mer specifika förhållanden.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Om skärmbredden är mellan 768px och 1024px ändras bakgrundsfärgen till ljusgrå.
Tillämpningsexempel: Responsiv design
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}I responsiv design är det vanligt att använda olika layouter beroende på skärmbredd.
- Textstorlekar ändras på mobil (600px eller mindre), surfplattor (601px till 1024px) och datorer (1025px eller mer).
Sammanfattning
@media är ett kraftfullt verktyg för att byta CSS-stilar beroende på enheter och skärmstorlekar, och är oumbärligt för responsiv design. Genom att använda villkor som min-width och max-width på ett smart sätt kan du skapa en webbplats som är optimerad för olika enheter.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.