那看我慢慢道來，不過在這之前，先要弄清楚幾個問題：
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>
移動端web適配
移動端web適配我了解的總共有4種方法 首先在做移動端開發的時候一定會加上viewport name viewport content width width device,initial scale 1 minimum scale 1,maximum scale 1,user scalable n...
web移動端適配入門
乙個表示列印影象或顯示器單位面積上畫素數量的指數。一般用來計量電腦，電視機和手持電子裝置螢幕的精細程度。通常情況下，每英吋畫素值越高，螢幕能顯示的影象也越精細。它的值為 螢幕對角線解析度 螢幕尺寸。計算公式 例如 iphone5 的螢幕解析度為1136 x 640 螢幕大小為 4 英吋。可以由下公式...
移動端 Web頁面適配
由於手機機型較多，各個手機的螢幕尺寸不一樣，所以做移動端頁面，需要考慮在安卓和ios的各種尺寸裝置的相容問題，我們要做的 web 頁面適配，就是為了在不同裝置上，頁面能夠保持統一展示效果，或等比縮放。常見的移動適配方案有以下幾種 2.1 viewport 可視區 最初手機端需要照顧 pc 端，如果不...