vw移動端適配

admin發表於2018-09-11

使用rem為單位進行適配的目的是為了得到一個與螢幕寬度相關的單位，比如1rem=device-width/10，1rem等於十分之一螢幕寬度。其實vw更加合適，1vw等於百分之一的螢幕寬度，隨著軟硬體裝置的更新，現在可以考慮利用vw來實現適配。

關於vw的用法可以參閱CSS3 vw一章節。

關於rem適配可以參閱rem移動端適配一章節。

實現適配的原理和rem是一樣的，簡單介紹如下：

（1）.假如設計稿的寬度是750px，那麼1vw=7.5px。

（2）.根據設計稿將px轉換為vw，手動計算非常麻煩，可以使用postcss-px-to-viewport外掛。

（3）.如果使用iphone6訪問此頁面，iphone6的裝置寬度為375px，那麼1vw=3.75px，自動實現了縮放適配，對於其他裝置也是如此。當然也可以根據dpr進行視口的縮放，比如iphone6，縮放0.5之後，視覺視口的寬度變為750px，類似於淘寶的flexible.js方案。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
html {
  font-size:18px;
}
#antzone {
  width:50vw;
  height:25vw;
  background-color:green;
  text-align:center;
}
</style>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

程式碼雖然簡單，但是足以演示vw適配的特性，div寬度始終是所在視口寬度的一半，隨著視口的尺寸的變化，div的尺寸會等比例改變，以此來適配各種終端裝置。

元素的尺寸推薦使用vw，但是字型大小依然推薦使用px。

相關文章