前端进阶html+css07----移动端适配rem方案

weixin_43795761

已于 2023-08-08 23:10:36 修改

阅读量139

点赞数

文章标签： html 前端 css

于 2023-04-02 18:32:40 首次发布

本文链接：https://blog.csdn.net/weixin_43795761/article/details/129914642

版权

文章介绍了rem单位的工作原理，它是基于HTML根元素的font-size来计算的。通过示例代码展示了如何根据页面视口宽度动态改变根元素的font-size，从而实现页面元素大小随屏幕尺寸变化。此外，还提到了使用媒体查询作为另一种调整根字体大小的方法。

摘要由CSDN通过智能技术生成

1.首先，要知道rem是根据根元素的font-size来计算的，根元素即页面的html元素。

例： html{ font-size:10px; } 那么width:2rem; 的意思是width: 2* 10px = 20px;

2.所以，如果希望页面上元素的大小随着页面的宽度动态改变== 根据页面宽度动态改变根元素的font-size。

<script>
  //获取html
  const htmlEl = document.documentElement;
  function setRemUnit(){
    //获取视口宽度
    const htmlWidth = htmlEl.clientWidth;
    //根据宽度计算font-size, 一般是除以10
    const fontSize = htmlWidth/10;
    //将font-size设置到html上
    htmlEl.style.fontSize = fontSize + "px";
  }
  //初始化，第一次进来的时候设置一次
  setRemUnit();
  //当屏幕发生变化时改变根font-size的大小
  window.addEventListener("resize",setRemUnit);
</script>
<style>
  html{
    font-size: 20px;
  }
  .box{
    width: 5rem;
    height: 5rem;
    background-color: red;
  }
</style>
<body>
  <div class="box"></div>
</body>

在这里插入图片描述
3.拖动边缘，动态改变页面大小即可测试。

注：还可以使用媒体查询来动态改变根元素font-size。

weixin_43795761

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端进阶html+css07----移动端适配rem方案

例： html{ font-size:10px;} 那么width:2rem;的意思是width: 2* 10px = 20px;2.所以，如果希望页面上元素的大小随着页面的宽度动态改变== 根据页面宽度动态改变根元素的font-size。1.首先，要知道rem是根据根元素的font-size来计算的，根元素即页面的html元素。注：还可以使用媒体查询来动态改变根元素font-size。3.拖动边缘，动态改变页面大小即可测试。
复制链接

扫一扫