`@media` og responsivt design
Denne artikel forklarer @media og responsivt design.
Du vil lære, hvordan man laver fleksible layouts gennem den grundlæggende syntaks og brugs-eksempler med @media.
YouTube Video
HTML til forhåndsvisning
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 er en regel til brug af CSS medieforespørgsler til at anvende stilarter baseret på specifikke betingelser. Dette gør det muligt at anvende forskellige CSS afhængigt af enhedens skærmstørrelse, orientering, opløsning eller andre egenskaber. Hovedsageligt brugt til responsivt design hjælper det med at justere udseendet på forskellige enheder såsom desktops, tablets og mobiler.
Grundlæggende syntaks
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- I
media-type, angiv typen af medie (f.eks.screen,print). - I
condition, angiv betingelser som skærmstørrelse eller opløsning.
Medietyper
- screen: Stilarter til skærmvisning, såsom på computere og smartphones.
- print: Dette er stilen, der anvendes til udskrivning.
- all: Dette er stilen, der anvendes på alle medier.
Ofte anvendte betingelser
- min-width / max-width: Anvend stilarter i henhold til skærmens minimums-/maksimumsbredde.
- min-height / max-height: Anvend stilarter i henhold til skærmens minimums-/maksimumshøjde.
- orientation: Angiv skærmens orientering (
portraitfor lodret,landscapefor vandret). - resolution: Anvend stilarter i henhold til skærmopløsningen (f.eks. DPI).
Eksempel på brug
Stilændringer baseret på skærmbredde
For eksempel for at angive stilarter, der anvendes, når skærmbredden er mindre end 600 pixels, kan du skrive det sådan her:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- På enheder med en skærmbredde på 600px eller mindre ændres baggrundsfarven til lyseblå, og paragrafskriftens størrelse bliver 14px.
Stilarter baseret på skærmens orientering
For at anvende stilarter, når enheden er i vandret orientering, kan du skrive det sådan her:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Når skærmen er i vandret tilstand, bliver baggrundsfarven lysegrøn.
3. Eksempel på at kombinere flere betingelser
Du kan kombinere flere betingelser med and for at anvende stilarter på mere specifikke betingelser.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Hvis skærmbredden er mellem 768px og 1024px, ændres baggrundsfarven til lys grå.
Anvendelseseksempel: Responsivt 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 responsivt design er det almindeligt at anvende forskellige layouts afhængigt af skærmbredden.
- Skriftstørrelser ændrer sig på mobil (600px eller mindre), tablet (601px til 1024px) og desktop (1025px eller mere).
Sammendrag
@media er et kraftfuldt værktøj til at skifte CSS-stilarter afhængigt af enheder og skærmstørrelser og er afgørende for responsivt design. Ved dygtigt at bruge betingelser som min-width og max-width kan du skabe en hjemmeside optimeret til forskellige enheder.
Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.