使用rem自适应屏幕

Posted 欢欢_blog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用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>

 

以上是关于使用rem自适应屏幕的主要内容,如果未能解决你的问题,请参考以下文章

html动态设置根字体大小(页面字体使用rem单位可根据屏幕大小自适应)

大屏幕rem 自适应 postcss-pxtorem

移动web--rem 自适应

rem实现页面自适应屏幕分辨率

移动端rem自适应布局-最简单易懂的两种方法

移动端屏幕自适应js与rem