rem简单实现移动端适配

rem：移动web开发

默认字体大小是16px
在
```
<html>
```
中设置字体大小
与em的区别：
- em是在父级设置字体大小受影响

移动端适配

首先获取屏幕的宽度
计算当前屏幕宽度和640的比例
计算出font-size的值

改变html的font-size的值

<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
    <meta charset="UTF-8">
    <title>rem</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 6.4rem;
            height: 6.4rem;
            background-color: pink;
            font-size: .14rem;
            margin: 0 auto;
        }
        p {
            width: 50%;
            height: 50%;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个p</p>
    </div>
</body>
</html>

第一种：

window.onresize = function(){
    var html = document.getElementsByTagName('html')[0];
    var width = html.offsetWidth;
    console.log(width);
    html.style.fontSize = (width>=640?640:width)/640*100   'px';
};

第二种：

  var html = document.getElementsByTagName('html')[0];
     if(html){
         var w = window.innerWidth;
         var fontSize = (w>640?640:w)/640 * 100;
         html.style.fontSize = fontSize   'px';
     }
     window.onload = function(){
         window.onresize = function(){
             var w = window.innerWidth;
             console.log(w);
             var fontSize = (w>640?640:w)/640 * 100;
             html.style.fontSize = fontSize   'px';
         }
     }

更多专业前端知识，请上【猿2048】www.mk2048.com

来源：https://blog.csdn.net/QDY5945/article/details/102761222

标签

font-size

rem

var

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!