简单的移动端rem布局方法

最新推荐文章于 2022-12-30 00:22:59 发布

金翅

最新推荐文章于 2022-12-30 00:22:59 发布

阅读量750

点赞数

分类专栏：移动端rem布局文章标签：移动布局 html rem

本文链接：https://blog.csdn.net/qq_37103514/article/details/73826870

版权

移动端rem布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为根元素的html设置font-size的字体大小，根据屏幕的宽度来改变字体的大小，来达到自适应的效果，比如设计图的宽度是750px，那就用750/16=46.875px；一个div的宽度是200px，就是200/46.875=4.27rem，小数太多的情况下可以四舍五入；因为设计图宽度多为750px算起来小数特别多特别麻烦，所以把设计图宽度改成640px，算起来就好多了。

<script type="text/javascript">
            //rem根元素设置字体大小
            document.documentElement.style.fontSize = innerWidth / 16 + 'px';
            onresize = function() {
                document.documentElement.style.fontSize = innerWidth / 16 + 'px';
            };


        </script>