vue rem 适配

使用vue.js新搭建一个移动端项目,如何自适应呢?

在使用vue-cli创建好一个项目之后,我们需要在index.html文件当中,加入以下的代码块

        fnResize()
        window.onresize = function () {
            fnResize()
        }
        function fnResize() {
            var deviceWidth = document.documentElement.clientWidth || window.innerWidth
            if (deviceWidth >= 750) {
                deviceWidth = 750
            }
            if (deviceWidth <= 320) {
                deviceWidth = 320
            }
            document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
        }

之后,在写css时,只要将px单位替换成rem,这里设置的比例是100px=1rem,例如,宽度为100px时,可以直接写成1rem

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容