美文网首页
vue rem 适配

vue rem 适配

作者: 我是何宝荣呀 | 来源:发表于2020-04-16 10:27 被阅读0次

    使用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

    相关文章

      网友评论

          本文标题:vue rem 适配

          本文链接:https://www.haomeiwen.com/subject/grwlvhtx.html