移动端使用rem方法

Posted gfweb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端使用rem方法相关的知识,希望对你有一定的参考价值。

1 在可以设置网页标题栏的页面写一个匹配手机的方法

<script>
       function resetWidth() {
            // 兼容ie浏览器 document.body.clientWidth
            var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
            console.log(baseWidth);
            // 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
            document.documentElement.style.fontSize = baseWidth / 375 * 100 + ‘px‘
        }
        resetWidth();
        window.addEventListener(‘resize‘, function () {
            resetWidth();
        })      
    </script>

 然后在html根目录设置默认大小

 

以上是关于移动端使用rem方法的主要内容,如果未能解决你的问题,请参考以下文章

移动端使用rem方法

移动端适配

Vue项目配置rem移动端适配

移动端rem距离单位的使用

3分钟读懂移动端rem使用方法

移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发