码迷,mamicode.com
首页 > 其他好文 > 详细

使用rem自适应屏幕

时间:2017-09-04 17:49:34      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:minimum   html   use   res   har   charset   user   适应   window   

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

 

使用rem自适应屏幕

标签:minimum   html   use   res   har   charset   user   适应   window   

原文地址:http://www.cnblogs.com/liyuhuan/p/7474351.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!