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

<!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;

 

posted @ 2016-04-18 16:51  黑客PK  阅读(852)  评论(0)  编辑  收藏  举报