`@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 媒體查詢根據特定條件套用樣式的規則。這使得可以根據設備的螢幕尺寸、方向、解析度或其他特徵應用不同的 CSS。主要用於響應式設計，幫助調整桌面、平板和行動設備等不同設備上的外觀。
基本語法
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- 在
media-type中指定媒體類型（例如：screen，print）。 - 在
condition中指定螢幕尺寸或解析度等條件。
媒體類型
- 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 之間，背景顏色將變為淺灰色。
應用範例：響應式設計
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 等條件，您可以創建適合各種設備的最佳化網站。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。