Responsive Web Design

響應式網頁設計

EnYi

2016.12.22

為什麼要使用RWD?

2. 搜尋最佳化：

1. 符合各種行動裝置的瀏覽尺寸，維護成本比APP更低。

因為獨立的行動網頁會產出獨立的網址，對於搜　尋引擎來說，RWD只會有一網址會更為友善。

RWD兩個主要元素

讓你可以用CSS根據螢幕的尺寸大小來設計。

使用百分比為單位，能夠對不同螢幕作出回應。

2. 媒體查詢(Media Query)：

1. 彈性(flexibility)：

倒金字塔討論方式

內容策略

最重要

次重要

不重要

開始建立響應式網站吧

使用HTML5

但會有舊版瀏覽器不支援問題:
可以參考Can i use http://caniuse.com/

視埠viewport

讓響應式網站能夠運作的關鍵

<meta name="viewport" content="width=device-width; 
initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

width=device-width	瀏覽器以全尺寸的方式展示
initial-scale=1	初始縮放，告訴瀏覽器一開始將網頁載入螢幕時要如何縮放。若initial-scale=2 表示初始載入頁面會放大成實際尺寸的兩倍。
user-scalable:1 或 0	使用者的縮放能力，0關閉(1開啟)
maximum-scale=1.0	最大縮放，只能將全尺寸的頁面調整到幾倍大。 maximum-scale=2;最大只能縮放到兩倍大

IE支援

老舊的瀏覽器不支援HTML5，所以必須補充支援，下載javascript HTML5 Shiv
(https://github.com/aFarkas/html5shiv)，並手動插入<head></head>中
//告訴瀏覽器，只有在瀏覽器是IE且版本早於IE9時，才執行指令html5shiv.js。

<!--[if It IE9]>
                <script src="files/html5shiv.js"></script>
<![endif]-->

媒體查詢media query

單一條件
例：如果視窗最小寬度為500px，就套用這些CSS

@media screen and (min-width:500px) {.....}

單一條件
例：如果視窗最大寬度為500px，就套用這些CSS

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

行動裝置載具查詢Screen Sizes
http://screensiz.es/phone

例：如果視窗為直立，就套用這些CSS

@media screen and  (orientation: portrait) {.....}

例：如果視窗為橫向，就套用這些CSS

@media screen and  (orientation:landscape) {.....}

兩者需同時符合
例：如果視窗在400px和700px之間，就套用這些CSS

@media screen and (min-width: 400px) and (max-width: 700px)

兩者符合一種即可
例：如果是彩色螢幕或彩色投影機兩者之一，就套用這些CSS

@media screen and (color), projection and (color) {.....}

媒體查詢media query

@media(max-width) 從大螢幕到小螢幕...

Desktop First

Mobile First

@media(min-width) 從小螢幕到大螢幕...

設定最大寬度

max-width

具有流體式佈局，亦能設定窄版最大寬度設定
讓img可放大至圖片像素最大寬度，而不會100%無限放大出現馬賽克。

以%來設定流體式佈局寬度

不同螢幕寬度的斷點時機

參考別人怎麼做：http://mediaqueri.es/

安裝Chrome外掛：響應式偵測斷點工具

Responsive Inspector

使用Google analytics

瞭解網站最多使用的載具寬度

查詢最熱門PC螢幕解析度

http://gs.statcounter.com/

查詢各大廠牌行動裝置尺寸

http://viewportsizes.com/

壓縮圖片線上工具

壓縮圖片大小，降低使用行動裝置瀏覽網站流量與等待時間

https://tinypng.com/

響應式網頁設計

By enyilio

Responsive Web Design

響應式網頁設計

More from enyilio