vue移动端适配 -- px2rem
2018-11-19 17:20
525 查看
vue移动端适配 -- px2rem
安装
npm install px2rem-loader lib-flexible --save
在main.js中引入
import 'lib-flexible/flexible.js'
在build中utils.js找到generateLoaders 方法,添加以下代码
[code]const px2remLoader = { loader: 'px2rem-loader', options: { remUnit:37.5 } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) }
重启项目后,px会变成rem
阅读更多相关文章推荐
- Vue-cli 将px转化为rem,适配移动端
- Vue:将px转化为rem,适配移动端
- Vue:将px转化为rem,适配移动端
- Vue 移动端适配解决方案
- vue移动端适配--rem
- 24k纯小白用Vue写移动端页面时遇到的适配坑
- vue 移动端屏幕适配 使用rem
- vue-cli使用px2rem
- 2018移动端页面适配最新方案直接写px-通过gulp搭建一体化的移动端开发环境
- Vue移动端的适配
- vue使用rem实现 移动端屏幕适配
- vue做移动端适配最佳解决方案(亲测有效)
- 自使用移动端rem适配--并且vscode-px自动转化成rem
- 【VUE移动端适配】VUE使用flexible布局
- 详解vue2.0 不同屏幕适配及px与rem转换问题
- vue项目中使用lib-flexible解决移动端适配的问题解决
- vuejs第二篇 vue-cli配置移动端自适配(引入flexible)
- vue使用px2rem
- 详解vue移动端项目的适配(以mint-ui为例)
- 移动端适配方案