vue实现自适应和px转rem
1,安装依赖
安装阿里可伸缩布局依赖lib-flexible
npm i lib-flexible -S
安装px转rem依赖px2rem
npm install px2rem-loader -s
2,在main.js中引入
3,因为依赖中当屏幕宽度大于540后,width固定写死了,需要修改依赖文件lib-flexible/flexible.js
改成width
4,完成rem即可进行布局
也可以吧lib-flexible.js文件复制出来然后再全局注册
import '@/ib-flexible/flexible'
5,px布局到页面展示为rem
在vue项目中build下的 utils.js中,找到generateLoaders 方法修改配置:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 192 // 这个值是根据UI设计的尺寸宽度/10,1920*1080设计稿,这个值就是1920/10 = 192
}
}
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
var loaders = [cssLoader, px2remLoader];//添加px2rem 插件
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
安装配置结束后,重启项目 。然后再浏览器中查看。会发现自己设置的px被转为rem 了