umi如何利用postcss-px-to-viewport做移动端布局？

zhaojiaxing123

已于 2023-02-28 19:34:53 修改

阅读量529

点赞数

分类专栏： js umi 文章标签： postcss 前端 javascript

于 2023-02-28 14:13:05 首次发布

本文链接：https://blog.csdn.net/zhaojiaxing123/article/details/129260295

版权

js 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

umi

5 篇文章 0 订阅

订阅专栏

文章介绍了如何在Umi框架中集成并配置postcss-px-to-viewport插件，将px转换为vw单位以适应移动端布局。首先通过npm或yarn安装插件，然后在.umirc.ts配置文件中设定参数，如viewportWidth、viewportHeight、unitPrecision等，实现CSS样式自动转换。

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

先下载postcss-px-to-viewport

npm i postcss-px-to-viewport
yarn add postcss-px-to-viewport

引入postcss-px-to-viewport

import px2vw from "postcss-px-to-viewport"

在umi中的.umirc.ts进行配置

在这里插入图片描述

具体配置如下

favicon: "/favicon.ico",
fastRefresh: {},
extraPostCSSPlugins: [
  px2vw({
    unitToConvert: 'px', 		// 要转化的单位
    viewportWidth: 375, 		// 视窗的宽度，可根据自己的需求调整（这里是以PC端为例）
    viewportHeight: 667, 		// 视窗的高度
    unitPrecision: 6, 			// 转换后的精度，即小数点位数
    propList: ['*'], 			// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
    viewportUnit: 'vw', 		// 指定需要转换成的视窗单位，默认vw
    fontViewportUnit: 'vw', 	// 指定字体需要转换成的视窗单位，默认vw
    selectorBlackList: ['wrap'],// 指定不转换为视窗单位的类名，
    minPixelValue: 1, 			// 默认值1，小于或等于1px则不进行转换
    mediaQuery: true, 			// 是否在媒体查询的css代码中也进行转换，默认false
    replace: true, 				// 是否转换后直接更换属性值
    exclude: [/node_modules/], 	// 设置忽略文件，用正则做目录名匹配
    landscape: false, 			// 是否处理横屏情况
  })
],