使用rem来实现不同分辨率界面自适应

最新推荐文章于 2024-08-15 17:20:30 发布

艾瑞-Arin

最新推荐文章于 2024-08-15 17:20:30 发布

阅读量2.9k

点赞数 1

分类专栏： CSS 文章标签： javascript css3 自适应 rem 布局

本文链接：https://blog.csdn.net/r1283/article/details/114315118

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用rem来实现不同分辨率界面自适应

在界面初始化添加以下js

在index.html中加入此段js

<script>
      function handleResize() {
        var htmlWidth = document.documentElement.clientWidth|| document.body.clientWidth
        let htmlDom=document.getElementsByTagName('html')[0]
        htmlDom.style.fontSize= 100 / 1920 * htmlWidth + 'px';
      }
      handleResize();
      window.onresize = handleResize;
</script>

js表示在1920px分辨率下，根元素fontSize为100px，则公式为1rem = 100px。
随着屏幕大小的变化htmlDom.style.fontSize= 100 / 1920 * htmlWidth + 'px';根元素的fontSize不再是100px