postcss-px-to-viewport的适配使用

最新推荐文章于 2024-08-09 10:08:47 发布

混水的鱼

最新推荐文章于 2024-08-09 10:08:47 发布

阅读量1.8k

点赞数 1

分类专栏：前端知识点文章标签： postcss 前端 javascript

本文链接：https://blog.csdn.net/qq_51545970/article/details/129048149

版权

前端知识点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

postcss-px-to-viewport是一个CSS转换插件，能将px单位自动转化为vw和vh，简化移动端适配工作。通过配置参数如视窗宽度、高度、单位精度等，可以实现不同屏幕的自动适配，支持排除特定类和媒体查询转换。

摘要由CSDN通过智能技术生成

postcss-px-to-viewport介绍

在写移动端的时候，一直为了适配烦恼。通常解决办法都是使用百分比、弹性布局、媒体查询等方法。想偷懒，找个一劳永逸的方法来解决屏幕适配的问题。然后postcss-px-to-viewport就是一个很完美的插件，通过将px转化为vw、vh。主要适用于移动端官网

安装

先进行下载安装

npm install postcss-px-to-viewport --save-dev
yarn add -D postcss-px-to-viewport

配置参数

创建一个新的文件夹。名字以及位置如下所示

新文件夹名称及位置

然后里面配置代码如下：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, //视窗的宽度,对应设计稿的宽度
      viewportHeigth: 667, //视窗的高度
      unitPrecision: 5, //指定'px'转换为视窗单位值的小数位数
      viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vm
      selectorBlackList: [], //指定不需要转换的类
      minPixelValue: 1,  //最小转换值
      mediaQuery: false,//允许在媒体查询中转换为‘px’,使用媒体查询，再对一些东西进行配置
      exclude: [/TabBar/]  //不需要转化的组件文件名正则，必须是正则表达式
    }
  }
};

配置完要重启一下项目，不然不一定生效。

然后在写项目的时候，就可以放心大胆的使用px等单位了。在页面上会自动变成vw和vh去适配不同的屏幕。