实现不同屏幕自适应【postcss-px-to-viewport】

效果图#

未转换前：

转换后：

背景#

平常开发的时候使用px作为样式单位，但是在不同的屏幕尺寸下不能自适应，我们希望项目中所有使用到的px单位都转换成vw单位

使用步骤#

1. 安装

npm i postcss-px-to-viewport -D

2. 在项目根目录下创建postcss.config.js

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // 换成你本地在哪个分辨率下开发的尺寸
      viewportWidth: 375,
    },
  },
}

3.postcss-px-to-viewport插件不会对行内样式起作用。

那怎么解决？
① 在utils文件夹下创建px2vw.js文件

// 传入的num值是行内样式，不需要带px单位
export default function px2vw(num) {
  return (100 / window.screen.width) * num + 'vw'
}

② 将上述的方法挂载到app实例上，这样在所有的vue实例中都可以使用到这个方法
src/index.js

const app = createApp(App)
import px2vw from './utils/px2vw'
app.config.globalProperties.$px2vw = px2vw

③ 行内样式使用
App.vue

<h1 :style="{ height: $px2vw(200) }">测试行内样式-1</h1>
<h1 class="demo">测试行内样式-2</h1>
<style lang="less" scoped>
h1 {
  background-color: orange;
}
.demo {
  height: 200px;
}
</style>

参考文档#

• https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage#viewport-bu-ju
• https://github.com/evrone/postcss-px-to-viewport/issues/147