使用rem自适应屏幕 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <title>Document</title>
</head>
<body>
  <p style="font-size:0.1rem">rem的使用：根据屏幕大小自动改变字体大小</p>
</body>
<script>
    (function() {
        var newRem = function() {
            var html = document.documentElement;
            html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';
        };
        window.addEventListener('resize', newRem, false);
        newRem();
    })();
</script>
</html>

 

posted @ 2017-09-04 16:47  欢欢_blog  阅读(943)  评论(0)    收藏  举报