postcss-px-to-viewport 在360浏览器中不兼容
时间: 2023-12-08 10:38:53 浏览: 51
根据提供的引用内容,无法得出postcss-px-to-viewport在360浏览器中不兼容的结论。事实上,postcss-px-to-viewport是一个CSS后置处理器,用于将px转换为viewport单位(vw、vh、vmin、vmax),并且它是基于PostCSS的,可以与autoprefixer等其他PostCSS插件一起使用。在配置文件中进行配置后,即可将px自动转换为vw单位,从而实现移动端适配。因此,postcss-px-to-viewport并不涉及浏览器兼容性问题,它只是一个CSS后置处理器,用于处理CSS代码。如果您有其他相关问题,请继续提问。
相关问题
postcss-px-to-viewport 不兼容ie
根据提供的引用内容,postcss-px-to-viewport并不兼容IE8及以下版本,因为它使用了viewport单位,而这些浏览器不支持viewport单位。但是,它支持IE9及以上版本,因为这些浏览器支持viewport单位。
另外,需要注意的是,postcss-px-to-viewport只是一个CSS后置处理器,它只是将CSS中的px单位转换为viewport单位,而不是真正意义上的屏幕适配方案。因此,在使用postcss-px-to-viewport时,还需要结合其他方案来实现屏幕适配。
postcss-px-to-viewport 使用在vue2
postcss-px-to-viewport 是一个 PostCSS 插件,用于将 px 单位转换为 vw 或 vh 单位,以实现在不同设备上的自适应布局。它可以与 Vue2 一起使用,以下是使用 postcss-px-to-viewport 的步骤:
1. 首先,在项目中安装 postcss-px-to-viewport 插件。可以使用 npm 或 yarn 进行安装:
```
npm install postcss-px-to-viewport --save-dev
```
或
```
yarn add postcss-px-to-viewport --dev
```
2. 在项目根目录下创建一个名为 postcss.config.js 的文件,并添加以下配置:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 750, // 设计稿的宽度
viewportHeight: 1334, // 设计稿的高度
unitPrecision: 3, // 转换后的小数位数
viewportUnit: 'vw', // 转换的单位
selectorBlackList: ['.ignore'], // 需要忽略的 CSS 类名
minPixelValue: 1, // 最小转换单位值
mediaQuery: false // 是否允许在媒体查询中转换 px
}
}
}
```
3. 在项目的 build/webpack.base.conf.js 文件中找到 postcss 配置项,并将其修改为:
```javascript
module.exports = {
// ...
postcss: [
require('postcss-px-to-viewport')()
],
// ...
}
```
4. 重新启动项目,此时 postcss-px-to-viewport 插件会自动将 CSS 中的 px 单位转换为 vw 或 vh 单位,实现自适应布局。