简单调整单页面rem适配

最新推荐文章于 2024-04-13 21:21:47 发布

Mia_03

最新推荐文章于 2024-04-13 21:21:47 发布

阅读量122

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Mia_03/article/details/133035536

版权

标图宽度尺寸/新设备宽度 = 旧font-size/新font-size

旧/新 =  100/val
旧val = 新100
val = (新*100)/旧

新页面的font-size = 新设备宽度 * 旧font-size * 标图宽尺寸

新设备视图宽度使用document.documentElement.clientWidth获取

需求：目前标图宽度为400，其中有个100px的盒子，当宽度为800时，盒子自动变为200px

1、先写一个盒子 100*100的红盒子

<style>
    .test {
            width: 100px；
            height: 100px;
            background-color: brown;
        }
</style>
<body>
    <div class="test">
    </div>
</body>

2、设定html中font-size为100px，方便计算，test盒子也变成了rem

<style>
      html {
            font-size: 100px; //设定旧font-size
        }

      .test {
            width: 1rem; //绝对单位px变成相对单位rem
            height: 1rem;
            background-color: brown;
        }
    </style>
<body>
    <div class="test">
    </div>
</body>

3、在script中进行计算

  window.onresize = function () { //当window的视图变化
        //获取新视图的font-size = 新视图宽尺寸 * 旧font-size /原本的宽尺寸     
        let fs = document.documentElement.clientWidth * 100 / 400
        //将新视图font-size赋值给新视图，保证test盒子的rem宽度准确
        document.documentElement.style.fontSize = fs +'px'
    }

完成！

Mia_03

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单调整单页面rem适配

新设备视图宽度使用document.documentElement.clientWidth获取。需求：目前标图宽度为400，其中有个100px的盒子，当宽度为800时，盒子自动变为200px。2、设定html中font-size为100px，方便计算，test盒子也变成了rem。新页面的font-size = 新设备宽度 * 旧font-size * 标图宽尺寸。标图宽度尺寸/新设备宽度 = 旧font-size/新font-size。1、先写一个盒子 100*100的红盒子。
复制链接

扫一扫