手機瀏覽器適配

meta

作手機網頁常常會看到這樣的一句代碼

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

• width=device-width 設置視圖的寬度等於設備屏幕的寬度
• initial-scale=1 設置初始縮放比例爲1
• minimum-scale=1 設置最小的縮放比例爲1
• maximum-scale=1 設置最大的縮放比例爲1
• user-scalable=no 不容許縮放

作一個簡單粗暴的變換

<meta name="viewport" content="width=320, maximum-scale=1.3, user-scalable=no">
將視圖的寬度設爲320，最大縮放比設爲1.3，不設置初始縮放比。
這樣能夠將整個視圖進行縮放

rem

字體單位

• px 無繼承，經常使用
• em 繼承，相對於父元素繼承
• rem 繼承，相對於root繼承，通常爲html,爲css3屬性，支持IE9+及其餘現代瀏覽器
• vh 1vh=視窗高度/100，爲css3屬性，支持IE9+，chrome20+，firefox19+，safari6+,android browser4.4+
• vw 1vw=視窗寬度/100

利用rem

經過js來計算根元素的font-size,從而適應各類屏幕

利用vh

vh原本就是視窗高度的，根據不一樣的屏幕的視窗高度來適應

p.s.果真我仍是不會寫博客