可伸缩布局方案 flexible.js
首先需要准备 flexible.js：https://github.com/amfe/lib-flexible/blob/2.0/index.js
flexible.js 处理了什么问题：
- 1px 问题，当 dpr 大于等于 2 的时候，将 border 都设置为 0.5px
- 根据页面宽度设置 rem
- 根据 dpr 设置 body 下的 fontsize
下面是源码：
-
window.devicePixelRatio：获取设备像素比（设备像素比 ＝ 物理像素 / 设备独立像素） - pageshow：当一条会话历史记录被执行的时候将会触发页面显示 pageshow 事件
(function flexible (window,) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))1、页面引入 flexible.js
在页面 html 文件里引入 flexible.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="/lib/flexible.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
引入之后我们可以看一下 f12，元素一栏里查看 html 根元素是否有 font-size：
2、编写 p2r 函数
根据设计稿去划分份数：比如：设计稿为 1920 * 1080，开发时候将设计稿分为 10 份方便计算，所以得到 1rem = 1920 / 10
在工具样式文件里 utils.scss 编写 p2r 函数。
@function p2r($size) {
@return $size / 192 * 1rem;
}
3、使用
下面我们根据设计稿的尺寸就可以编写样式了
比如：设计稿的字体是 16px
@import "@/assets/scss/utils.scss";
.kaimo {
font-size: p2r(16);
font-weight: 400;
color: #ffffff;
}
