ภาพรวมของการออกแบบที่ตอบสนองใน CSS
บทความนี้อธิบายภาพรวมของการออกแบบที่ตอบสนองใน CSS
เราจะนำเสนอภาพรวมของแนวคิดพื้นฐานเกี่ยวกับการออกแบบที่ตอบสนองและบทบาทของ CSS ในการใช้งานสิ่งนี้
YouTube Video
HTML สำหรับการแสดงตัวอย่าง
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>ภาพรวมของการออกแบบที่ตอบสนองใน CSS
ใน CSS การออกแบบที่ตอบสนองคือเทคนิคในการแสดงเค้าโครงและเนื้อหาเว็บเพจให้เหมาะสมบนอุปกรณ์และขนาดหน้าจอที่หลากหลาย เช่น สมาร์ทโฟน แท็บเล็ต และเดสก์ท็อป เพื่อให้ได้การออกแบบที่ตอบสนอง ส่วนใหญ่จะใช้เทคนิคและวิธีการดังต่อไปนี้
การสอบถามสื่อ (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}การสอบถามสื่อคือฟีเจอร์ที่ช่วยให้คุณสามารถกำหนดกฎ CSS ที่แตกต่างกันตามความกว้าง ความสูง ความละเอียด และอื่นๆ ของอุปกรณ์ สิ่งนี้ช่วยให้สามารถใช้สไตล์ที่แตกต่างกันได้ขึ้นอยู่กับขนาดหน้าจอ
ในตัวอย่างนี้ สีพื้นหลังจะเปลี่ยนตามความกว้างของหน้าจอ
เค้าโครงที่ยืดหยุ่น (Fluid Layouts)
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}ในการออกแบบที่ตอบสนอง ความกว้างและความสูงขององค์ประกอบจะถูกกำหนดโดยใช้หน่วยสัมพัทธ์ เช่น เปอร์เซ็นต์ หรือ em แทนค่าพิกเซลที่แน่นอน สิ่งนี้ช่วยให้เค้าโครงสามารถเปลี่ยนแปลงได้อย่างยืดหยุ่นตามขนาดหน้าจอ
ภาพที่ตอบสนอง (Responsive Images)
1img {
2 max-width: 100%;
3 height: auto;
4}ภาพยังถูกตั้งค่าให้ปรับขนาดตามขนาดหน้าจอด้วย ตัวอย่างเช่น การใช้ max-width สามารถปรับภาพให้ไม่เกินขนาดความกว้างขององค์ประกอบแม่ (Parent Element)
การตั้งค่า Viewport
1<meta name="viewport" content="width=device-width, initial-scale=1.0">ใช้แท็ก <meta> ใน HTML เพื่อให้แน่ใจว่าเบราว์เซอร์ตีความความกว้างของหน้าจอของอุปกรณ์ได้อย่างถูกต้อง หากไม่มีสิ่งนี้ การออกแบบที่ตอบสนองจะไม่ทำงานอย่างถูกต้อง โดยเฉพาะบนอุปกรณ์เคลื่อนที่
การใช้เฟรมเวิร์ก CSS
เฟรมเวิร์ก CSS อย่าง Bootstrap และ Tailwind CSS มักถูกใช้เพื่อให้การออกแบบที่ตอบสนองมีประสิทธิภาพ เฟรมเวิร์กเหล่านี้ถูกออกแบบมาเพื่อสร้างเค้าโครงที่ตอบสนองได้อย่างง่ายดายผ่านคลาสที่กำหนดไว้ล่วงหน้า
ตัวอย่าง: ระบบกริดของ Bootstrap
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>ในตัวอย่างข้างต้น เมื่อความกว้างของหน้าจออยู่ที่ md (ขนาดกลาง โดยทั่วไปคือ 768px ขึ้นไป) จะมีการจัดคอลัมน์สองคอลัมน์ไว้ข้างกัน แต่ในหน้าจอที่แคบกว่านั้น จะจัดเรียงในแนวตั้ง
การจัดเค้าโครงแบบ Flexbox และ Grid
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}การใช้ CSS flexbox หรือ grid ช่วยให้สามารถปรับเปลี่ยนเค้าโครงได้อย่างยืดหยุ่น เทคนิคการจัดเค้าโครงเหล่านี้เหมาะสมสำหรับออกแบบเว็บไซต์แบบตอบสนอง (Responsive Design) เนื่องจากช่วยให้สามารถปรับเค้าโครงให้เข้ากับขนาดหน้าจอโดยอัตโนมัติได้อย่างง่ายดาย
สรุป
การออกแบบเว็บไซต์แบบตอบสนองเป็นวิธีสำคัญที่ช่วยให้ผู้ใช้สามารถดูเว็บไซต์ได้อย่างสะดวกสบาย ไม่ว่าจะใช้อุปกรณ์แบบใด ด้วยการผสมผสาน media queries, การจัดเค้าโครงแบบยืดหยุ่น, แฟรมเวิร์ก และเทคโนโลยีการจัดเค้าโครงใหม่ๆ เช่น Flexbox และ Grid สามารถสร้างหน้าเว็บที่ยืดหยุ่นและปรับตัวได้มากขึ้น
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย