基於 vw 單位的移動端適配方案學習筆記
回顧並總結一下移動端適配的一些知識
前提要求
-
"head"裏添加"meta"
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> - 兼容性,ie9+ (ie8 讓它自個兒玩去吧)
計算 html 的"font-size"
// 設計稿寬度, 750|640|520
var designWith = 750
// 設計稿上1px對應設備上多少個單位的vw, 100vw表示設備屏幕寬度
var vw = 100 / designWith
// html的font-size的大小
// 同時也是單位rem的大小
// 爲了方便後面的尺寸計算,放大100倍,即設計稿上的100px;
var fontSize = 100 * vw
// 設置html的font-size, 可以直接寫在 css 裏面
document.getElementsByTagName("html")[0].style.fontSize = fontSize + "vw"使用
設計稿上元素的尺寸(px): eleWidth
.ele {
width: (eleWidth/100)rem;
}code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
html {
font-size: 13.33333333vw;
/* 設計稿750px; 此時,1rem對應設計稿上的100px */
}
html,
body {
margin: 0;
}
body {
/* 設置默認的字體大小,這裏的0.32rem=16px */
font-size: 0.32rem;
}
.list {
list-style: none;
padding-left: 0;
margin: 0;
}
.list::after {
content: "";
clear: both;
}
.box {
float: left;
width: 2.5rem;
height: 2.5rem;
}
</style>
</head>
<body>
<ul class="list">
<li class="box" style="background-color: #2196f3">box 01</li>
<li class="box" style="background-color: #8bc34a">box 02</li>
<li class="box" style="background-color: #ff5722">box 03</li>
</ul>
</body>
</html>