移动端主要采用rem布局,vue+webpack,通过webpack编译,将css中px自动转成rem或其它单位,这里采用px2rem-loader进行转换,最后引入lib-flexible,实现不同设备不同分辨率的弹性适配。
实现步骤
第一步:引入lib-flexible
# 下载lib-flexible
npm i lib-flexible --save
# 在vue入口main.js导入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘@/router‘
import ‘lib-flexible/flexible‘
Vue.config.productionTip = false
import ‘@/assets/global.less‘
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
router,
components: { App },
template: ‘<App/>‘
})
第二步:引入px2rem-loader
# 下载px2rem-loader
npm install px2rem-loader --save-dev
# utils.js中配置loader
const px2remLoader = {
loader: ‘px2rem-loader‘,
options: {
remUnit: 75
}
}
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
支持less
引入less-loader
npm install less less-loader --save-dev
注:以上方案,只能转换vue文件中style里的css,对于内联样式无能为力。内联样式以及组件间传参的css,只好另外想办法,可以重写loader,通过正则匹配后进行转换。
<template>
<div class="template-view">
</div>
</template>
<script>
export default {
name: ‘template‘,
components: {},
data () {},
methods: {}
}
</script>
<style scoped>
</style>
原文地址:https://www.cnblogs.com/vipinchan/p/9733710.html
时间: 2024-11-04 08:29:14