Översikt över responsiv design i CSS
Den här artikeln förklarar översikten av responsiv design i CSS.
Vi kommer att ge en översikt av det grundläggande konceptet för responsiv design och CSS:s roll i dess implementering.
YouTube Video
HTML för förhandsgranskning
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>Översikt över responsiv design i CSS
I CSS är responsiv design en teknik för att på lämpligt sätt visa layout och innehåll på en webbsida på olika enheter och skärmstorlekar, såsom smartphones, surfplattor och datorer. För att uppnå responsiv design används främst följande tekniker och 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 är en funktion som gör det möjligt att tillämpa olika CSS-regler baserat på enhetens bredd, höjd, upplösning och mer. Detta möjliggör att olika stilar används beroende på skärmstorlek.
I detta exempel ändras bakgrundsfärgen beroende på skärmens bredd.
Flytande layouter
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}I responsiv design anges bredden och höjden på element med relativa enheter som procenttal eller em istället för absoluta pixelvärden. Detta gör att layouten kan ändras flexibelt beroende på skärmens storlek.
Responsiva bilder
1img {
2 max-width: 100%;
3 height: auto;
4}Bilder ställs också in för att skalas efter skärmens storlek. Till exempel kan användning av max-width justera bilder så att de inte överskrider bredden på sitt förälderlement.
Inställningar för vyport
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Använd <meta>-taggen i HTML för att säkerställa att webbläsaren tolkar enhetens skärmbredd korrekt. Utan detta fungerar inte responsiv design korrekt, särskilt på mobila enheter.
Användning av CSS-ramverk
CSS-ramverk som Bootstrap och Tailwind CSS används ofta för att effektivt uppnå responsiv design. Dessa ramverk är utformade för att enkelt skapa responsiva layouter med fördefinierade klasser.
Exempel: Bootstraps rutnätssystem
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 exemplet ovan, när skärmbredden är md (medelstorlek, vanligtvis 768px eller mer), ordnas två kolumner sida vid sida, men på smalare skärmar ordnas de vertikalt.
Flexbox och 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}Att använda CSS flexbox eller grid möjliggör flexibla layoutjusteringar. Dessa layouttekniker är väl lämpade för responsiv design eftersom de gör det enkelt att automatiskt justera layouten efter skärmens storlek.
Sammanfattning
Responsiv design är en viktig metod för att säkerställa att användare bekvämt kan titta på webbplatser oavsett vilken enhet de använder. Genom att kombinera media queries, flexibla layouter, ramverk och nya layoutteknologier som Flexbox och Grid är det möjligt att skapa mer flexibla och anpassningsbara webbsidor.
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.