使用 postcss-px-to-viewport 适配
- 安装插件 postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
- 配置postcss-px-to-viewport
- 使用 postcss.config.js单独文件进行配置
module.exports = {
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px", // 默认值`px`，需要转换的单位
viewportWidth: 1920, // 视窗的宽度,对应设计稿宽度
// viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
propList: ["*"], // 转化为vw的属性列表 propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
viewportUnit: "vw", // 指定需要转换成视窗单位
fontViewportUnit: "vw", // 字体使用的视窗单位
selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类 selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换
mediaQuery: false, // 允许在媒体查询中转换`px`
minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
replace: true, // 是否直接更换属性值而不添加备用属性
landscape: false, // 是否处理横屏情况 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
// exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件 用正则做目录名匹配
// landscapeUnit: "vw", // 横屏时使用的单位
// landscapeWidth: 1134 // 横屏时使用的视窗宽度
},
},
};
css: {
extract: IS_PROD, // 是否使用css分离插件 ExtractTextPlugin,是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
requireModuleExtension: true, // 启用 CSS modules for all css / pre-processor files.
sourceMap: false,
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px", // 默认值`px`，需要转换的单位
viewportWidth: 1920, // 视窗的宽度,对应设计稿宽度
// viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
propList: ["*"], // 转化为vw的属性列表 propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
viewportUnit: "vw", // 指定需要转换成视窗单位
fontViewportUnit: "vw", // 字体使用的视窗单位
selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类 selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换
mediaQuery: false, // 允许在媒体查询中转换`px`
minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
replace: true, // 是否直接更换属性值而不添加备用属性
landscape: false, // 是否处理横屏情况 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
// exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件 用正则做目录名匹配
// landscapeUnit: "vw", // 横屏时使用的单位
// landscapeWidth: 1134 // 横屏时使用的视窗宽度
})
]
},
scss: {
// 向全局sass样式传入共享的全局变量,注入 `sass` 的 `mixin` `variables` 到全局,
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
// sass 版本 9 中使用 additionalData ，版本 8 中使用 prependData
prependData: `
@import "@assets/css/mixin.scss";
@import "@assets/css/variables.scss";
`
}
}
},
vue2项目中使用 mixin配合sacle缩放实现自适应
- css样式文件
#app{
width: 100%;
height: 100%;
position: relative;
overflow-x: hidden;
#index{
position: absolute;
width: 1920px; // 设计稿的宽度
min-height: 100%;
top: 0;
left: 0;
transform-origin: 0 0;
}
}
- mixinDraw.js 文件
/* 屏幕适配 mixin 函数 */
// * 设计稿尺寸（px）
const baseWidth = 1920
export default {
data() {
return {
// * 定时函数
drawTiming: null
}
},
mounted () {
// 加载后先计算一遍缩放比例
this.calcRate()
// 生成一个监听器：窗口发生变化从新计算计算一遍缩放比例
window.addEventListener('resize', this.resize)
},
beforeDestroy () {
window.removeEventListener('resize', this.resize)
},
methods: {
calcRate () {
// 拿到整个页面元素
const appRef = this.$refs.zoom
// 如果没有值就结束
if (!appRef) return
// 当前宽高比
const currentRate = parseFloat((window.innerWidth / baseWidth).toFixed(5))
if (appRef) {
appRef.style.transform = `scale(${currentRate}, ${currentRate})`
}
},
resize () {
// 先清除计时器
clearTimeout(this.drawTiming)
// 开启计时器
this.drawTiming = setTimeout(() => {
this.calcRate()
}, 200)
}
},
}
- vue文件中使用
<template>
<div ref="zoom" id="index">
</div>
</template>
<script>
import $ from '~/utils/tool'
import mixinDraw from '@/utils/mixinDraw'
export default {
name: 'Index',
data() {
return {}
},
mixins:[mixinDraw],
}
