2017 18個網站設計趨勢

2016年末，自然要來看一下，明年的設計趨勢發展。
這篇文章提到了18項2017年的設計趨勢：

18 web design trends for 2017

https://webflow.com/blog/18-web-design-trends-for-2017
附上原文出處，方便查看原文。

這裡列出其中幾項，作為自己未來設計時的首要考量：

1. 內容優先

   
   
   任何排版佈局都只是為了讓使用者專注在應該閱讀的項目，而且不影響閱讀速度。
   
   這點在台灣的網頁非常難以實現，客戶與老闆從來沒有在想客戶要看到什麼，在客戶與老闆雙重要求：
   『大一點』
   『紅色』
   『加粗』
   『加閃亮亮』....
   一大堆花俏搶眼各種顏色都上了同一個頁面之下，重點早就不知道被淹沒到哪裡去了。
     

RWD時， font-size 的單位

很久很久以前，web designer 只要考慮IE6 7 8 的時候，字體單位，只要用px就萬事OK。
有一天， 一個叫賈伯斯的人，拿出了一台iPad，從此....

px

優點：PhotoShop與CSS 通用

缺點：在移動裝置無擴充性

em

優點：在移動裝置有彈性

缺點：

1. PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
2. 巢狀結構時具有繼承性（如下圖：第二層變成 2*2 = 4em）
   

rem

優點：

1. CSS3新增的一個相對單位（root em，根em）
2. 移動裝置上有彈性
3. 不繼承
4. 透過設定，能簡易與 px 換算

缺點：

2. PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
3. 巢狀結構時具有繼承性（如下圖：第二層變成 2*2 = 4em）

目前採用rem，寫法如下

html { font-size:62.5%;} /*  相當於 10px*/

body { font-size:1.6rem; line-height: 1.5; font-family: "微軟正黑體", "Microsoft JhengHei";}

h1 { font-size: 4.0rem; } /* = 40px*/

h2 { font-size: 3.6rem; } /* = 36px*/