@media และการออกแบบที่ตอบสนอง
บทความนี้อธิบายเกี่ยวกับ @media และการออกแบบที่ตอบสนอง
คุณจะได้เรียนรู้วิธีสร้างเลย์เอาต์ที่ยืดหยุ่นผ่านไวยากรณ์พื้นฐานและตัวอย่างการใช้งานของ @media
YouTube Video
HTML สำหรับการแสดงตัวอย่าง
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
@media เป็นกฎสำหรับการใช้ CSS media query เพื่อกำหนดสไตล์ตามเงื่อนไขที่ระบุ ช่วยให้สามารถกำหนด CSS ที่แตกต่างกันได้ตามขนาดหน้าจอของอุปกรณ์, การวางแนว, ความละเอียด, หรือคุณลักษณะอื่นๆ ส่วนใหญ่ใช้สำหรับการออกแบบที่ตอบสนอง ช่วยปรับลักษณะการแสดงผลบนอุปกรณ์ต่างๆ เช่น เดสก์ท็อป, แท็บเล็ต, และมือถือ
ไวยกรณ์พื้นฐาน
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- ใน
media-typeให้ระบุประเภทสื่อ (เช่นscreen,print) - ใน
conditionให้ระบุเงื่อนไข เช่น ขนาดหน้าจอหรือความละเอียด
ประเภทสื่อ (Media Types)
- screen: สไตล์สำหรับการแสดงผลบนหน้าจอ เช่น คอมพิวเตอร์และสมาร์ทโฟน
- print: สไตล์นี้ใช้กับการพิมพ์
- all: สไตล์นี้ใช้กับสื่อทุกประเภท
เงื่อนไขที่ใช้บ่อย
- min-width / max-width: กำหนดสไตล์ตามความกว้างขั้นต่ำ/สูงสุดของหน้าจอ
- min-height / max-height: กำหนดสไตล์ตามความสูงขั้นต่ำ/สูงสุดของหน้าจอ
- orientation: ระบุการวางแนวหน้าจอ (
portraitสำหรับแนวตั้ง,landscapeสำหรับแนวนอน) - resolution: กำหนดสไตล์ตามความละเอียดของหน้าจอ (เช่น DPI)
ตัวอย่างการใช้งาน
การเปลี่ยนแปลงสไตล์ตามความกว้างของหน้าจอ
ตัวอย่างเช่น เพื่อกำหนดสไตล์ที่ใช้เมื่อความกว้างของหน้าจอน้อยกว่า 600 พิกเซล คุณสามารถเขียนได้ดังนี้:
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- บนอุปกรณ์ที่มีความกว้างหน้าจอ 600px หรือน้อยกว่า สีพื้นหลังจะเปลี่ยนเป็นสีน้ำเงินอ่อน และขนาดตัวอักษรย่อหน้าเป็น 14px
สไตล์ที่อิงตามการวางแนวหน้าจอ
เพื่อกำหนดสไตล์เมื่ออุปกรณ์อยู่ในแนวนอน คุณสามารถเขียนได้ดังนี้:
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- เมื่อหน้าจออยู่ในโหมดแนวนอน สีพื้นหลังจะเปลี่ยนเป็นสีเขียวอ่อน
3. ตัวอย่างของการรวมหลายเงื่อนไข
คุณสามารถรวมเงื่อนไขหลายอย่างด้วย and เพื่อใช้สไตล์กับเงื่อนไขที่เฉพาะเจาะจงมากขึ้น
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- หากความกว้างหน้าจออยู่ระหว่าง 768px ถึง 1024px สีพื้นหลังจะเปลี่ยนเป็นสีเทาอ่อน
ตัวอย่างการใช้งาน: การออกแบบที่ตอบสนองได้ (Responsive 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}ในการออกแบบที่ตอบสนองได้ มักจะใช้รูปแบบที่แตกต่างกันตามความกว้างของหน้าจอ
- ขนาดตัวอักษรเปลี่ยนไปตามอุปกรณ์: มือถือ (600px หรือน้อยกว่า), แท็บเล็ต (601px ถึง 1024px), และเดสก์ท็อป (1025px หรือมากกว่า)
สรุป
@media เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการเปลี่ยนสไตล์ CSS ตามอุปกรณ์และขนาดหน้าจอ และจำเป็นสำหรับการออกแบบที่ตอบสนองได้ โดยการใช้เงื่อนไขอย่างชำนาญ เช่น min-width และ max-width คุณสามารถสร้างเว็บไซต์ที่เหมาะสมกับอุปกรณ์ต่าง ๆ ได้
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย