vue项目使用flexible+rem实现移动端自适应

原创 taoserking 随笔 Vue.js 学习笔记 828阅读 2018-02-23 16:40:32 举报

项目安装flexible px2rem
npm i lib-flexible --save
npm i px2rem-loader --save-dev

入口文件引入flexible
main.js文件 import 'lib-flexible'

webpack生成的vue-cli项目更改配置
文件 build/utils.js
修改

增加

remUnit的值根据设计稿来,这里是750的设计稿

修改
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

评论 ( 2 )
最新评论
taoserking 1F 2018-03-23 18:03:27 2F

注意里面有一个px2rem插件,
我试过,所以我知道可以转化成rem
希望你试过了 再来评论

唯一的坑 在于,如果你项目引用其他的组件,
本身其他组件的样式已经做过适配,这样也会被转化成rem,会变得更小
那样子的话 不能引用px2rem

冷言 2018-03-23 11:42:56 1F

你绝的这样会 自适应吗? 你试过font-size吗? flexible 自带的值有变化?