009-rem 适配

宽度(px) = font-size * rem
比如 100(px) = font-size(50px) * rem(2)

安装 amfe-flexible (根据屏幕大小改变根字体大小:即是html的 font-size 值)

npm i amfe-flexible --save-dev
然后在main.js导入

import  "amfe-flexible";

px 转 rem

安装postcss-pxtorem
npm i postcss-pxtorem --save-dev
vue.config.js里配置

rem配置.jpg

//  vue.config.js
    const autoprefixer = require("autoprefixer");
    const pxtorem = require("postcss-pxtorem");
    module.exports = {
        css:{
            loaderOptions:{     
                postcss:{
                    plugins:[
                        autoprefixer(),
                        pxtorem({
                            rootValue:37.5,
                            propList:["*"],
                            //可选 ???
                            selectorBlackList:["van-circle__layer"]
                        })
                    ]
                }       
            }   
        }   
    }
新建reset.css 文件
body{
    font-size:16px !important;
}

导入到main.js

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

推荐阅读更多精彩内容

  • 1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...
    _双眸阅读 70,487评论 13 51
  • 现在回过头来看,感觉自己以前写复杂了,其实道理很简单; 就是利用vw,rem随屏幕,或者跟字体正比变化的特性; 1...
    会会会会阅读 43,095评论 16 40
  • 网上很多都说会pc网页开发,也就会了mobile网页开发。那么实际呢也是如此,但是对于新手来说却摸不着头脑无从下手...
    亚讯阅读 25,223评论 1 17
  • 说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,...
    841只阅读 1,474评论 1 3
  • 学习完整课程请移步 互联网 Java 全栈工程师 声明表单标签库 在使用 SpringMVC 的时候我们可以使用 ...
    撸帝阅读 1,821评论 0 2