postcss-px-to-viewport 视窗大于751 的时候不进行转换
时间: 2024-08-03 13:00:52 浏览: 31
`postcss-px-to-viewport` 是一个 PostCSS 插件,用于响应式设计中的像素到视口单位(如 rem)的转换,它帮助我们在不同设备尺寸上自适应布局。如果你想要设置当视窗宽度大于 751 像素时,不再对 px 单位进行转换,可以在配置文件 `.postcssrc.js` 或者直接在 CSS 中使用插件提供的选项来实现。
例如,在`.postcssrc.js` 配置中,你可以这样设置:
```javascript
module.exports = {
plugins: [
require('postcss-px-to-viewport')({
viewportWidth: 751,
unitPrecision: 6,
viewportUnit: 'vw',
propList: ['*'],
mediaQuery: '(min-width: 752px)', // 注意这里将751替换为752,因为插件会自动添加1px作为起点
exclude: /(max-width|width)$/i, // 只有不是width相关的属性才在大于751px时转换
landscape: true, // 如果需要考虑横屏情况
enableOnMobile: false, // 关闭移动端的转换
}),
],
};
```
在这个配置中,当视窗宽度大于等于 752px 时,`postcss-px-to-viewport` 就不会将 `px` 转换为其他单位了。