製作響應式網站-30天學會HTML＋CSS，製作精美網站

2021 iThome 鐵人賽

DAY 27

Modern Web

30天學會HTML＋CSS，製作精美網站系列第 27 篇

13th鐵人賽 css css教學 html html5

原來可以這樣做 | Sunny

2021-10-12 19:11:25

2090 瀏覽

分享至

響應式網頁設計是什麼

響應式網頁設計(Responsive Web Design)簡稱RWD，是開發網頁設計中的一種方法，在不改變網站結構，隨著顯示螢幕的大小調整網站的外觀和佈局。

如何製作響應式

設定viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

屬性：

width 設定畫面寬度 (數值/ device-weight)
height 設定畫面高度 (數值/ device-height)
initial-scale 設定畫面的初始縮放比例 (Min-0.25, Max-5)
minimum-scale 設定畫面的最小縮放比例 (Min-0.25, Max-5)
maximum-scale 設定畫面的最大縮放比例 (Min-0.25, Max-5)
user-scalable 設定是否允許使用者改變縮放比例 (1/0)

媒體查詢(Media Queries)

會使用@media(尺寸) CSS來設置，根據網頁畫面大小設定不同的樣式

media queries使用方法

在 HTML 引入

<html>
  <head>
    <title>title</title>
    <link rel="stylesheet" media="screen" href="css/style.css">
    <link rel="stylesheet" media="print" href="css/print.css">
  </head>
</html>

使用 @import

@import url("style.css") screen;
@import url("print.css") print;

在 CSS 內使用

@media screen {
  body { font-size: 16px; }
}
@media print {
  body { font-size: 14px; }
}

媒體類型（Media Type）

媒體類型是指在不同裝置及螢幕尺寸，使用哪一個CSS樣式

all：用於所有設備
print：印刷裝置，預覽列印或是印表機
screen：螢幕裝置，電腦螢幕、手機、平板
speech：音訊合成裝置

媒體特性（Media Feature）

width：寬度
height：高度
aspect-ratio：螢幕比例
orientation
有portrait 為直向，landscape 為橫向

Media Queries邏輯

and

兩個都成立才會是true
範例：最小寬度要414px及最大寬度要767px，才會做裡面的樣式

@media (min-width: 414px) and (max-width:767) { ... }

or

只要滿足一個條件，就會是true

or要用「,」逗號表示，否則會報錯

範例：最大寬度要414px或是最小寬度要767px，滿足其中一個條就，就會做裡面的樣式

@media (max-width:414px) , (min-width:767) { ... }

not

對Media Queries進行反向操作
範例：寬度大於375就會做裡面的樣式

@media not screen and (max-width:375px){ ... }

only

用來指定某種裝置媒體才能套用某些樣式

not 和 only 後方必須先接 media type ( 像是 screen 或 print )，不然會沒有作用

響應式網站優點

無需維護多個裝置且相同內容的網頁，減少維護時間成本
單一網址，利於分享網頁
單一連結，可以避免重覆的內容，有利增加搜尋引擎曝光度

結論

以上是媒體查詢製作響應式網站的使用方法，在設定樣式時盡可能的不要寫固定數值，像是px像素，改為%、vw...相對單位(在網頁常用單位-30天學會HTML＋CSS，製作精美網站，有做過說明，有興趣的可以到此連結看看)，或是使用max-width解決在手機版會跑版問題。

參考網站：
https://www.oxxostudio.tw/articles/201810/css-media-queries.html
https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=zh-tw
https://codingdailyblog.wordpress.com/2017/07/20/html-viewport的設定與屬性/

網頁變形-30天學會HTML＋CSS，製作精美網站

響應式網站注意細節-30天學會HTML＋CSS，製作精美網站

系列文

30天學會HTML＋CSS，製作精美網站共 30 篇

RSS系列文訂閱系列文

27 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

hyoeun86015

iT邦新手 4 級 ‧ 2021-10-28 16:32:00

謝謝您清楚的說明！
我看了好多理論文章，想要自己實做看看，但就是分不清楚@import 和 @media 要怎麼使用，看完你的文章我懂了！

回應 1
檢舉

原來可以這樣做 | Sunny iT邦新手 1 級 ‧ 2021-10-29 09:00:29 檢舉

很開心有幫助到您，如果製作上有任何問題，歡迎詢問唷

登入發表回應

我要留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

30天學會HTML＋CSS，製作精美網站系列 第 27 篇