1.5.1 在移動瀏覽器使用viewport元標籤控制佈局

viewport最早是iphone解決移動瀏覽器佈局的相關問題（PS：在處理螢幕方向改變時稍有差異，）的解決方案之一。後來隨著移動瀏覽器網頁的發展被廣泛使用。

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no"
 
 />

• maximum-scale、minimum-scale、user-scalable 規定用怎樣的方式去縮放頁面
• device-width 這一特殊值來指代比例為100%時螢幕寬度的CSS畫素數值
• initial-scale屬性控制頁面最初載入時的縮放等級

上述程式碼含義主要設定螢幕與頁面為比例為1:1、關閉預設的頁面縮放、預設的寬度等於裝置的寬度以及關閉一些預設的樣式（PS:例如telephone=no手機號碼不被顯示為撥號連結）具體更多設定可參考官方文件

效果：

使用後：

1.5.2 rem與em

• em 單位是根據父元素的font-size大小來取值的（PS：父元素的font-size是20px ，那麼子元素 1em=20px）
• rem 是根據根標籤的font-size取值，瀏覽器預設的根元素的font-size為16px

em單位如果層級非常的複雜，容易造成單位錯誤，字型過大擠壓佈局，一般來說rem更值得青睞。

那麼問題來了，如果需要設定標籤的字型大小為17px，那麼對應的rem值為1.0625rem，計算起來非常繁瑣，後來開發人員有一個解決方案：設定根元素的font-size為62.5% 即1rem=10px，問題就解決了。

1.5.3 擴充套件

• 阮一峰先生的部落格使用的是rem加em加百分比佈局
  

• 值得一提的是：此方案經過淘寶移動頁面

  擴充套件完整的flexible.js多裝置的測試，可靠度方面是經得住考驗的。