web移動端適配（騰訊方案）

那看我慢慢道來，不過在這之前，先要弄清楚幾個問題：

1.vw單位是什麼？

相對於視口的寬度，我們把整個視口寬均分成了100個單位的vw，也就是說1vw，相當於1%可視視窗寬。

vw單位在安卓瀏覽器4.4+和chrome26.0+都開始被支援。要是放到了幾年前，假如我們要使用vw單位來做移動端的適配，很可能會選擇放棄。但是現在安卓基本上很少能見到4.4以下的系統了，所以vw單位是目前非常好的移動端web應該首要選擇的單位。

2.transform:scale()

transform是css3新增的屬性，它的值scale()定義了2d縮放的轉換。scale接收兩個引數，分別是x軸y軸，值為數字。例如：transform: scale(2, 3)的意思就是將元素的寬變成原來的2倍，高變成原來的3倍。

除此之外，我們還需要明確一點的就是：縮放的基準點是**？預設情況下，縮放會以50%寬和50%的高為基準點，說白了就是元素的幾何中心點為基準進行縮放，而不是左上角的頂點(座標原點)。所以設定基準點的也會有相應的屬性：transform-origin。比如：transform-origin: 20% 40% 的意思就是轉換的基準點在x軸的20%和y軸的40%交點處；又如：transform-origin：center top 相當於transform: 50% 0

4.1 css中應該設定html, body 高度為100%，以免頁面元素豎向多出margin或者padding設定的值；

4.2 所有涉及到寬高屬性的值都應該使用vw;

4.3 為什麼要設定transform-origin: center top？因為，我們希望縮放的基準點，特別是y軸應該是基於y軸的頂點，這樣就不會導致根元素在y軸上也跟著縮放從而導致頁面混亂

5.具體的**

<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
flexible<
/title>
*    html, body 
body 
background-color: #ccc;
border:
1px solid #666
;      min-height:
100%
;      width:
100vw;
box-sizing: border-box;
}      font-size:
4.26vw;
padding:
5vw 1vw;
}<
/style>
<
/head>
>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
用來測試內容<
/p>
<
/div>
function
flexible
(obj)
else
}this
.init
=function()
)}else)}
}this
.init()
}// 此處進行呼叫，傳遞乙個物件，其中root表示繫結的根元素，size為設計稿寬度
newflexible()
<
/script>
<
/body>
<
/html>

6.線上演示：碼雲線上演示位址

web移動端適配（騰訊方案）

移動端web適配

web移動端適配入門

移動端 Web頁面適配

web移動端適配（騰訊方案）

移動端web適配

web移動端適配入門

移動端 Web頁面適配

相關推薦