Oversikt over responsiv design i CSS
Denne artikkelen forklarer en oversikt over responsivt design i CSS.
Vi gir en oversikt over det grunnleggende konseptet med responsivt design og rollen til CSS i implementeringen av det.
YouTube Video
HTML for 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>Oversikt over responsiv design i CSS
I CSS er responsiv design en teknikk for å vise layout og innhold på en passende måte på ulike enheter og skjermstørrelser, som smarttelefoner, nettbrett og stasjonære datamaskiner. For å oppnå responsiv design brukes hovedsakelig 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 funksjon som lar deg bruke forskjellige CSS-regler basert på enhetens bredde, høyde, oppløsning og mer. Dette gjør det mulig å bruke ulike stiler avhengig av skjermstørrelsen.
I dette eksemplet endres bakgrunnsfargen basert på skjermbredden.
Flytende oppsett
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}I responsiv design spesifiseres bredden og høyden på elementer ved bruk av relative enheter som prosent eller em i stedet for absolutte pikselverdier. Dette gjør det mulig for oppsettet å endre seg fleksibelt i henhold til skjermstørrelsen.
Responsive bilder
1img {
2 max-width: 100%;
3 height: auto;
4}Bilder er også satt opp til å skaleres i forhold til skjermstørrelsen. For eksempel kan bruk av max-width justere bilder slik at de ikke overstiger bredden til overordnede element.
Innstillinger for visningsområde
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Bruk <meta>-taggen i HTML for å sikre at nettleseren riktig tolker enhetens skjermbredde. Uten dette vil ikke responsiv design fungere som den skal, spesielt på mobile enheter.
Bruk av CSS-rammeverk
CSS-rammeverk som Bootstrap og Tailwind CSS brukes ofte for effektivt å oppnå responsiv design. Disse rammeverkene er laget for å enkelt lage responsive oppsett ved bruk av forhåndsdefinerte klasser.
Eksempel: Bootstraps rutenettsystem
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 eksempelet ovenfor, når skjermbredden er md (middels størrelse, vanligvis 768px eller mer), er to kolonner plassert side ved side, men på smalere skjermer er de arrangert vertikalt.
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}Ved å bruke CSS flexbox eller grid kan du gjøre fleksible justeringer av oppsettet. Disse layoutteknikkene er godt egnet for responsiv design, da de gjør det enkelt å automatisk tilpasse oppsettet etter skjermstørrelsen.
Sammendrag
Responsiv design er en viktig metode for å sikre at brukere komfortabelt kan se nettsider uavhengig av enheten de bruker. Ved å kombinere medieforespørsler, fleksible oppsett, rammeverk og nye layoutteknologier som Flexbox og Grid, er det mulig å lage mer fleksible og tilpassede nettsider.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.