rem是现在手机端用的比较普遍的单位，我最近也在用这个做一个手机站，在使用过程发现单纯的css并不能实现字体随屏幕放大缩小的效果，后来各种索搜，找到了解决方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
(function(){
function w() {
var r = document.documentElement;
var a = r.getBoundingClientRect().width;//获取当前设备的宽度
if (a > 720 ){//720不固定，根据设计稿的宽度定
a = 720;
}
rem = a / 7.2;
r.style.fontSize = rem + "px"
}
w();
window.addEventListener("resize", function() {//监听横竖屏切换
w()
}, false);
})();
</script>
<style>
p{font-size: 0.3rem}
</style>
<body>
<p>测试。。。。。测试。。。。。测试。。。。。测试。。。。。测试。。。。。</p>
</body>
</html>我们只需加上上面代码中的那段js就可以了，然后我们写css只需要把对应的值除以100，单位改成rem即可
注意：1、这段js最好放到页面的body上面，让他第一时间加载，防止网速慢而导致屏幕闪烁问题
2、当写一像素边框时，最好还是使用1px来写，因为在部分手机上0.01rem不显示
2490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
