rem字体在rem盒子里面不一样，或者不同的行解决

最新推荐文章于 2022-07-07 15:20:22 发布

anhuang1896

最新推荐文章于 2022-07-07 15:20:22 发布

阅读量107

点赞数

原文链接：http://www.cnblogs.com/qianduanjingying/p/5405043.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem</title>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <script type="text/javascript">
        function resizeEvt(){
        var ww = document.documentElement.clientWidth,
            drp = window.devicePixelRatio;
        //document.documentElement.style.fontSize = ww*drp/10+'px';iphone出问题。
        document.documentElement.style.fontSize = ww/10+'px';
        }
        document.addEventListener('DOMContentLoaded',resizeEvt,false);
        window.addEventListener('resize',resizeEvt,false);
    </script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width:10rem;
            height:100%;
            font-size:.5rem;
        }
    </style>
</head>
<body>
    <p>
        无忧工作网版权所有无忧工作网版权所有无忧工作网版权所有无忧
    </p>
</body>
</html>

现在测试是不需要window.devicePixelRatio的
至少拿同事的iphone测试之后是不需要的。
原理：
把一个手机屏幕分成10份。每一份就是1/10的屏幕宽度。避免了设置

html{
    font-size:62.5%;
}

在chrome浏览器下，只能定义12px以上的字体。低于12px都是按照12px的来计算的。

第二种方案(可行性方案，已在项目中实践)：

http://f2ehacker.com/yyw/

(function (doc, win) {
     var docEl = doc.documentElement,
         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
         recalc = function () {
     var clientWidth = docEl.clientWidth;
     if (!clientWidth) return;
         docEl.style.fontSize = Math.round( 100* (clientWidth / 750)) + 'px';
          };
          if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);
     doc.addEventListener('DOMContentLoaded', recalc, false);
 })(document, window);

注意：移动端字体一般不会低于14px;还有就是页面内部的滚动条需要添加css属性，保证流畅度：

-webkit-overflow-scrolling: touch;

转载于:https://www.cnblogs.com/qianduanjingying/p/5405043.html

anhuang1896

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem字体在rem盒子里面不一样，或者不同的行解决

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>rem</title> <meta name="viewport" content="width=device-width, use...
复制链接

扫一扫