rem 适配方案
原理是什么？
rem是个相对单位，相对的是 html 根元素的 font-size 大小。这样一来我们就可以通过html上的字体大小来控制页面上所有以rem为单位的元素尺寸。
两种常见方案
把页面宽度分成10份
思路：
- 把页面宽度分成10分，算出每份px值（
window.innerWidth / 10） - 写个 scss mixin 函数，参数为设计稿px值，返回对应rem值（也就是份数）
- 公式：
rem份数 = 设计稿px / 每份有多少px值
- 公式：
示例代码 例如在vue项目的index.html页中动态计算根元素字体大小
index.html
<!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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
...
</head>
<body>
<noscript>
...
</noscript>
<div id="app"></div>
<script>
;(function(doc, win) {
const docEl = doc.documentElement
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
const recalc = () => {
let clientWidth = docEl.clientWidth;
clientWidth = clientWidth < 750 ? clientWidth : 750;
// 把屏幕宽度划分成10份，那么每一份的宽度就等于1rem，也就是 75px
docEl.style.fontSize = clientWidth / 10 + 'px'
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
recalc()
})(document, window)
</script>
</body>
</html>
然后利用css预处理器定义一个mixin函数（下方用的stylus），用来将设计稿上的px转为对应的rem值 计算公式为： 页面元素的rem值 = 设计稿元素值（px）/（屏幕宽度 / 划分的份数）
mixin.stylus
/* 把px转为rem */
/* 用设计稿px除以每一份rem的px，就能算出几个rem */
px2rem(designpx)
$rem = 750 / 10;
return (designpx / $rem)rem
最后在css中使用
某vue组件的style标签中
/* 375设计稿上100%宽以及50高的导航条（iPhone6的dpr为2，所以px值得都乘以2） */
header
width px2rem(750)
height px2rem(100)
html的font-size设置为 100px （PC端适配）
思路：
html { font-size: 100px; }，把100px当做因子- 如果要设置
1200px宽，那么换算下来就是{ width: 12rem } - 这样也不会受到浏览器默认字体的影响（对比设置 html 字体大小为 62.5% ）
VW 适配方案
原理就是：把屏幕分成100份 举例： 假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
width: 16vw; /* 100vw*120/750 */
font-size: 3.73vw; /* 100vw*28/750 */
line-height: 6.4vw; /* 100vw*48/750 */
border: 1px solid #000; /*不需要缩放的部分用px*/
text-align: center;
}
</style>
</head>
<body>
<div class="button">按钮</div>
</body>
</html>
在正式的项目里，我们也可以用SCSS，把换算交给预处理器
@function px2vw($px) {
@return $px * 100vw / 750;
}
.button {
width: px2vw(120);
font-size: px2vw(28);
line-height: px2vw(48);
border: 1px solid #000;
text-align: center;
}
Comments NOTHING