Oversigt over responsivt design i CSS
Denne artikel forklarer oversigten over responsive design i CSS.
Vi vil give en oversigt over det grundlæggende koncept for responsive design og CSS’s rolle i implementeringen af det.
YouTube Video
HTML til forhåndsvisning
css-responsive-overview.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-overview.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>Responsive Design Related Properties</h2>
20 </header>
21 <article>
22 <h3>Media Queries</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26/* When the screen width is 600px or less */
27@media (max-width: 600px) {
28 body {
29 background-color: lightblue;
30 }
31}
32/* When the screen width is between 601px and 1200px */
33@media (min-width: 601px) and (max-width: 1200px) {
34 body {
35 background-color: lightgreen;
36 }
37}
38/* When the screen width is 1201px or more */
39@media (min-width: 1201px) {
40 body {
41 background-color: lightyellow;
42 }
43}
44</pre>
45 </section>
46 </article>
47 <article>
48 <h3>Fluid Layouts</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52.container {
53 width: 80%; /* 80% width relative to the parent element */
54 margin: 0 auto; /* Center the element */
55}
56</pre>
57 </section>
58 </article>
59 <article>
60 <h3>Responsive Images</h3>
61 <section>
62 <header><h4>CSS</h4></header>
63<pre class="sample">
64img {
65 max-width: 100%;
66 height: auto;
67}
68</pre>
69 </section>
70 </article>
71 <article>
72 <h3>Viewport</h3>
73 <section>
74 <header><h4>HTML</h4></header>
75 <pre><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
76 </section>
77 </article>
78 <article>
79 <h3>CSS Frameworks</h3>
80 <section>
81 <header><h4>HTML</h4></header>
82<pre>
83<div class="container">
84 <div class="row">
85 <div class="col-md-6">Left content</div>
86 <div class="col-md-6">Right content</div>
87 </div>
88</div>
89</pre>
90 </section>
91 </article>
92 <article>
93 <h3>Flexbox & Grid Layout</h3>
94 <section>
95 <header><h4>CSS</h4></header>
96<pre class="sample">
97/* Flex Example */
98.container {
99 display: flex;
100 flex-wrap: wrap; /* Allow elements to wrap */
101}
102
103.item {
104 flex: 1 1 200px; /* Each item has a minimum width of 200px */
105}
106
107/* Grid Example */
108.container {
109 display: grid;
110 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
111 gap: 16px;
112}
113</pre>
114 </section>
115 </article>
116 </main>
117</body>
118</html>Oversigt over responsivt design i CSS
I CSS er responsivt design en teknik til hensigtsmæssigt at vise layout og indhold på en webside på forskellige enheder og skærmstørrelser som f.eks. smartphones, tablets og desktops. For at opnå responsivt design bruges hovedsageligt følgende teknikker og metoder.
Media queries
1/* When the screen width is 600px or less */
2@media (max-width: 600px) {
3 body {
4 background-color: lightblue;
5 }
6}
7/* When the screen width is between 601px and 1200px */
8@media (min-width: 601px) and (max-width: 1200px) {
9 body {
10 background-color: lightgreen;
11 }
12}
13/* When the screen width is 1201px or more */
14@media (min-width: 1201px) {
15 body {
16 background-color: lightyellow;
17 }
18}Media queries er en funktion, der giver dig mulighed for at anvende forskellige CSS-regler baseret på enhedens bredde, højde, opløsning og mere. Dette gør det muligt at anvende forskellige stilarter afhængigt af skærmstørrelsen.
I dette eksempel ændres baggrundsfarven i forhold til skærmbredden.
Flydende layout
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}I responsivt design angives bredden og højden af elementer ved hjælp af relative enheder som procent eller em i stedet for absolutte pixelværdier. Dette gør det muligt for layoutet fleksibelt at ændre sig i forhold til skærmstørrelsen.
Responsive billeder
1img {
2 max-width: 100%;
3 height: auto;
4}Billeder opsættes også til at skalere i forhold til skærmstørrelsen. For eksempel kan brug af max-width justere billeder, så de ikke overstiger bredden af deres forældrelement.
Viewport-indstillinger
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Brug <meta>-tagget i HTML for at sikre, at browseren korrekt fortolker enhedens skærmbredde. Uden dette vil responsivt design ikke fungere korrekt, især på mobile enheder.
Brug af CSS-rammeværk
CSS-rammeværk som Bootstrap og Tailwind CSS bruges ofte til effektivt at opnå responsivt design. Disse rammeværk er designet til nemt at skabe responsive layout ved hjælp af foruddefinerede klasser.
Eksempel: Bootstraps grid-system
1<div class="container">
2 <div class="row">
3 <div class="col-md-6">Left content</div>
4 <div class="col-md-6">Right content</div>
5 </div>
6</div>I det ovenstående eksempel, når skærmbredden er md (mellem størrelse, generelt 768px eller mere), er to kolonner placeret side om side, men på smallere skærme er de placeret lodret.
Flexbox og Grid Layout
1/* Flex Example */
2.container {
3 display: flex;
4 flex-wrap: wrap; /* Allow elements to wrap */
5}
6
7.item {
8 flex: 1 1 200px; /* Each item has a minimum width of 200px */
9}
10
11/* Grid Example */
12.container {
13 display: grid;
14 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
15 gap: 16px;
16}Brug af CSS flexbox eller grid muliggør fleksible layouttilpasninger. Disse layoutteknikker er velegnede til responsivt design, da de gør det nemt automatisk at tilpasse layouts efter skærmstørrelse.
Sammendrag
Responsivt design er en vigtig metode til at sikre, at brugerne komfortabelt kan se websites uanset hvilken enhed, de bruger. Ved at kombinere medieforespørgsler, fleksible layouts, frameworks og nye layoutteknologier som Flexbox og Grid er det muligt at skabe mere fleksible og adaptive websider.
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.