移动端rem适配(只需三个步骤)

最新推荐文章于 2024-06-03 23:42:36 发布

庚中

最新推荐文章于 2024-06-03 23:42:36 发布

阅读量2.8w

点赞数 4

分类专栏：八.web移动开发三.JavaScript 十四.面试题文章标签：移动端rem适配(只需三个步骤)

本文链接：https://blog.csdn.net/xiaodi520520/article/details/90056865

版权

三.JavaScript 同时被 3 个专栏收录

59 篇文章 1 订阅

订阅专栏

十四.面试题

24 篇文章 2 订阅

订阅专栏

八.web移动开发

8 篇文章 0 订阅

订阅专栏

开始前:一定要记住,在iphone5下,1rem=16px;

图示:
在这里插入图片描述

下面开始三个步骤:

1.获取html的宽

操作代码:

let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body

在这里插入图片描述

2.获取htmlDom元素

let htmlDom=document.getElementByTagName('html')[0]

在这里插入图片描述

3.设置html样式

htmlDom.style.fontSize=htmlwith/20+'px';

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .test{
        width: 20rem;
        height: 10rem;
        background-color: skyblue;
        text-align: center;
    }
    .hello{
        color: red;
        font-size: 1rem;

    }
</style>
<body>
    <div class="test">
        <div class="hello">hello JSPang</div>
    </div>
</body>
</html>
<script>
    // 三个步骤:
    // 1.获取html的宽,
    let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body
    console.log(htmlwidth);
    
    // 2.htmlDom
    let htmlDom=document.getElementsByTagName("html")[0]
    console.log(htmlDom);

    //3.设置根元素样式
    htmlDom.style.fontSize=htmlwidth/20+'px';//记住这个20是等份的意思,这样每一份是16px,即1rem=16px;
    
</script>

效果:点击不同的设备后刷新,都可以适配.
在这里插入图片描述

上面再进行优化:添加监听事件,让它自动监听窗口变化动态改变.
完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .test{
        width: 20rem;
        height: 10rem;
        background-color: skyblue;
        text-align: center;
    }
    .hello{
        color: red;
        font-size: 1rem;

    }
</style>
<body>
    <div class="test">
        <div class="hello">hello JSPang</div>
    </div>
</body>
</html>
<script>
function gethtmlfontsize(){
    // 三个步骤:
    // 1.获取html的宽,
    let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body
    console.log(htmlwidth);
    
    // 2.htmlDom
    let htmlDom=document.getElementsByTagName("html")[0]
    console.log(htmlDom);

    //3.设置根元素样式
    htmlDom.style.fontSize=htmlwidth/20+'px';
}
// 调用一次
gethtmlfontsize();
// 添加监听事件(resize是监听的意思)
window.addEventListener('resize',gethtmlfontsize)
</script>

效果:
在这里插入图片描述
上面是参考iphone5的320宽的写法,iphone678代码如下:

<script>
 /**
    * ================================================
    *   设置根元素font-size
    * 当设备宽度为375(iPhone6)时，根元素font-size=16px; 
    × ================================================
    */
(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  
  var refreshRem = function () {
    var clientWidth = win.innerWidth
                      || doc.documentElement.clientWidth
                      || doc.body.clientWidth;

    console.log(clientWidth)
    if (!clientWidth) return;
    var fz;
    var width = clientWidth;
    fz = 16 * width / 375;
    docEl.style.fontSize = fz + 'px';//这样每一份也是16px,即1rem=16px
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);
</script>

补充:禁止客户双指缩放办法
在这里插入图片描述

最后附上一个更完美的解决方案(用别人写好的hotcss.js文件,你就可以直接写px像素,它会自动帮你转成rem):
我的收藏的hotcss.js文件地址
hotcss.js文件拷贝到viewport.js里,然后在webpack.config.js里面引入即可.
在这里插入图片描述

庚中

关注

4
点赞
踩
91

收藏

觉得还不错? 一键收藏
3
评论
移动端rem适配(只需三个步骤)

开始前:一定要记住,在iphone5下,1rem=16px;图示:下面开始三个步骤:1.获取html的宽操作代码:let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body2.获取htmlDom元素le...
复制链接

扫一扫

专栏目录