1.5.0 H5頁面适配移動終端

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多裝置的測試，可靠度方面是經得住考驗的。