iT邦幫忙

2021 iThome 鐵人賽

DAY 27
1
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 27

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

響應式網頁設計是什麼

響應式網頁設計(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

1 則留言

0
hyoeun86015
iT邦新手 5 級 ‧ 2021-10-28 16:32:00

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

sunny iT邦新手 4 級 ‧ 2021-10-29 09:00:29 檢舉

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

我要留言

立即登入留言