移动端适配插件
postcss-px-to-viewport
// 文件vite.config.ts
css: {
postcss: {
plugins: [
postcssPxToViewport({
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
},
unitToConvert: 'px', // 要转化的单位
viewportWidth: 375, // 设计稿的宽度
unitPrecision: 6, // 转换后的精度,小数点位数
propList: ['*'], // 指定转换的css属性的单位
viewportUnit: 'vw', // 指定需要转换成的视窗单位
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位
selectorBlackList: ['.ignore'], // 要忽略的选择器,保留为px
minPixelValue: 1, // 小于或者等于最小值,则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换
exclude: [/element-plus/], // 忽略文件
landscape: false, // 是否处理横屏情况
})
]
},
},
scoped和css样式穿透
scoped属性,可以使CSS样式只作用于当前组件中的元素,不会影响到子组件(非根结点)的样式,使得组件之间的样式不互相污染。如果想改变子组件的样式,就要使用样式穿透。
// 方法一:使用>>> 操作符,只能用于css
<style scoped>
>>>.child{
color: red;
}
</style>
// 方法二:用deep,能用于css/less/scss
// 写法1 使用::v-deep
<style lang="scss" scoped>
::v-deep .child{
color: red;
}
</style>
// 写法2 使用/deep/
<style scoped>
/deep/.child{
color: red;
}
</style>
// 写法3 使用:deep(<inner-selector>)
<style lang="scss" scoped>
:deep(.child){
color: red;
}
</style>