postcss-px-to-viewport怎么根据浏览器来自己写方法来配置vw比例
时间: 2023-10-13 08:09:41 浏览: 53
要根据浏览器来自己写方法来配置vw比例,需要使用 `postcss-px-to-viewport` 提供的 `viewportUnit` 函数和 `browser` 对象。
首先,我们需要安装 `postcss-px-to-viewport`:
```bash
npm install postcss-px-to-viewport --save-dev
```
然后在 `postcss.config.js` 文件中配置 `postcss-px-to-viewport` 插件,定义自己的 `viewportUnit` 函数和 `browser` 对象:
```js
const browserList = {
chrome: 55,
firefox: 50,
safari: 10,
ie: 11,
edge: 12,
};
module.exports = {
plugins: [
require('postcss-px-to-viewport')({
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: ({ browser }) => {
if (browser.name === 'chrome' && browser.version >= browserList.chrome) {
return 'vw';
} else if (browser.name === 'safari' && browser.version >= browserList.safari) {
return 'vw';
} else if (browser.name === 'firefox' && browser.version >= browserList.firefox) {
return 'vw';
} else if (browser.name === 'ie' && browser.version >= browserList.ie) {
return 'vw';
} else if (browser.name === 'edge' && browser.version >= browserList.edge) {
return 'vw';
} else {
return 'rem';
}
},
selectorBlackList: ['.ignore'],
minPixelValue: 1,
mediaQuery: false,
}),
],
};
```
在上面的例子中,我们定义了 `browserList` 对象来存储不同浏览器的最低版本号。然后在 `viewportUnit` 函数中,根据当前浏览器的名称和版本号,返回对应的单位。如果当前浏览器不在 `browserList` 中,就默认返回 `rem` 单位。
最后,在 CSS 文件中使用 `px` 单位作为开发时的长度单位,插件会将其自动转换为 `vw` 或 `rem` 单位。
```css
.container {
width: 320px;
height: 240px;
font-size: 16px;
}
```
编译后的 CSS 如下:
```css
.container {
width: 42.66667vw;
height: 32vw;
font-size: 2.13333vw;
}
```
需要注意的是,这种方法只是一种示例,具体的浏览器版本和单位比例需要根据实际情况进行调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)