使用场景，思路可以参考其他大神的文章，这篇文章分享下使用过程中的问题。
可以只使用rem，或者使用rem+devicePixelRatio+initial-scale来实现响应式页面
用rem+1.0的缩放比没什么问题，只要在resize的时候修改根部的font-size就可以达到目的，如果是第二种，按照750px宽度，dpr是2，在开发过程中遇到了一个问题，代码如下：
<!doctype html>
<html style="font-size: 75px;">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="user-scalable=no, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
<style>
.text{
font-size: .3733333333rem; /*期望是14px*/
}
</style>
</head>
<body>
<!-- 文字超出屏幕 -->
<h1 class="text">111111111111111111111111111111111111111111111111111
111111111111111111111111111111111111111111111111111
</h1>
</body>
</html>
发现h1在多行文本超出的情况下，不受 initial-scale=0.5的影响，展示出来是28px, 不明白渲染原理，可能是浏览器在渲染的时候还是根据device-width来渲染，有兴趣的同学可以看下W3C文档
解决办法是：
.text {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
最近使用了vue2+ssr+koa2+webpack来搭建了新项目，所以直接使用webpack自定义loader把px转rem，使用750px+dpr=2来计算出相应的rem值，在页面渲染之前通过js拿到真实的dpr和设备宽度和来计算html的font-size, 可以参考https://github.com/amfe/lib-flexible，也可以用饿了么的实现方案，使用vw来代替rem
自定义loader代码：
module.exports = (content) => {
return content.replace(/\d?\.?\d+px/g, (item) => {
let temp = +item.slice(0, -2) / 75 * 2 + ''
return temp.slice(temp.indexOf('0') === 0 ? 1 : 0, temp.indexOf('.') + 11) + 'rem'
})
}
可能还有其它的坑，之后遇到再更新吧~
over~
网友评论