rem实现响应式布局

最新推荐文章于 2022-06-25 16:23:42 发布

慢慢学编程

最新推荐文章于 2022-06-25 16:23:42 发布

阅读量916

点赞数

分类专栏：慢慢找工作文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40492102/article/details/104793230

版权

慢慢找工作专栏收录该内容

50 篇文章 0 订阅

订阅专栏

rem单位是相对于根元素html的font-size来决定的，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定的元素的大小也会发生响应式的变化，因此，如果通过rem来实现响应式布局，只需要根据视图容器的大小，动态的改变font-size的值即可；

<style>
    html {
        font-size: 16px;
    }
    
    * {
        margin: 0px;
        padding: 0px;
    }
    
    #parent {
        width: 50rem;
        height: 25rem;
        background: green;
        border: 1px solid red;
        text-align: center;
        line-height: 25rem;
    }
</style>

<body>
    <div id="parent">
        慢慢加油
    </div>
</body>

<script>
    function refreshRem() {
        var docE1 = document.documentElement; //documentElement 属性返回文档的根节点。
        var width = docE1.getBoundingClientRect().width; //方法返回元素的大小及其相对于视口的位置
        var flexibleEl = document.querySelectorAll('div');
        var rem = width / 50;
        console.log(width, rem);
        docE1.style.fontSize = rem + 'px';
        flexibleEl.rem = window.rem = rem;
    }
    window.addEventListener('resize', refreshRem);
    </script>

慢慢学编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
rem实现响应式布局

rem单位是相对于根元素html的font-size来决定的，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定的元素的大小也会发生响应式的变化，因此，如果通过rem来实现响应式布局，只需要根据视图容器的大小，动态的改变font-size的值即可；<style> html { fon...
复制链接

扫一扫