rem简单实现移动端适配

来源：互联网发布：德国四川知乎编辑：程序博客网时间：2024/06/06 11:05

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';         }     }

https://github.com/PaddyWang/summarize

0 0