移动端 rem 适配

👁 2021-02-17

如何为移动端进行rem适配

以下方法是简单版的

通过对html根元素字体大小设置屏幕的宽

最初css

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: purple;
    }
</style>

js代码

<body>
    <div class="box"></div>
    <!-- html根元素字体大小设置屏幕的宽 -->
    <script type="text/javascript">
        window.onload = function () {
            //获取屏幕的宽
            var width = document.documentElement.clientWidth
            console.log(width)
            //获取html根元素
            var htmlNode = document.querySelector('html')
            //设置字体大小
            htmlNode.style.fontSize = width+'px'
        }
    </script>
</body>

这样1rem就是整个屏幕的宽，之后将css样式中的px修改为rem

<style>
    .box {
        width: 0.5rem;
        height: 0.5rem;
        background-color: purple;
    }
</style>

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/02/17/rem-adapter/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------