根据你所使用的构建工具(如 Webpack、Vite 等),你需要在项目的构建配置文件中配置 postcss-px-to-viewport。以下是一些常见的配置方式: Webpack 配置示例 如果你使用的是 Webpack,并且已经配置了 postcss-loader,可以在 postcss.config.js 或在Webpack 的 loader 配置中直接添加 postcss-px-to-viewport 插件配置:...
unitToConvert:'px',//需要转换的单位,默认为"px"viewportWidth: 375,//设计稿的视口宽度unitPrecision: 5,//单位转换后保留的精度propList: ['*'],//能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换viewportUnit: 'vw',//希望使用的视口单位fontViewportUnit: 'vw',//字体使用的视口...
使用postcss-px-to-viewport插件,我们可以轻松地适配不同的屏幕尺寸。将像素单位(px)转换为视口单位,可以确保在不同屏幕上保持一致的样式比例。 例如,假设我们的设计稿宽度为750px,高度为1334px。如果我们在一个宽度为1920px,高度为1080px的屏幕上展示这个设计稿,即视口宽度为1920px,高度为1080px。使用postcss-px-...
unitToConvert(String) 要转换的单位,默认为 px。 viewportWidth(数字)视口的宽度。 unitPrecision(Number) 允许 vw 单位增长到的十进制数。 propList(数组)可以从 px 更改为 vw 的属性。 值需要完全匹配。 使用通配符 * 启用所有属性。例子: ['*'] 在单词的开头或结尾使用 *。(['position'] 将匹配 backgr...
注意:这里使用path.join('node_modules','vant')是因为适应不同的操作系统, 在mac下结果为node_modules/vant,而在windows下结果为node_modules\vant 另外,收到有同学反馈关于Cannot read property 'dirname' of undefined的问题,我本地由于是macOS系统,多次尝试无法复现该问题,猜测有可能是平台问题或打包工具问题,...
viewportUnit(String) 希望使用的视口单位 fontViewportUnit(String) 字体使用的视口单位 selectorBlackList (Array) 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。 如果传入的值为字符串的话,只要选择器中含有传入值就会被匹配 例如selectorBlackList为['body']的话, 那么.body-class就会被忽略 ...
使用环境 安装 npm install postcss-px-to-viewport--save-devyarn add postcss-px-to-viewport--save-devpnpm add postcss-px-to-viewport--save-dev AI代码助手复制代码 如果devserver正在运行,安装完成以后记得重启devserver。 配置 在项目根目录下创建postcss.config.js文件,并填入一下内容: ...
使用Postcss-px-to-viewport插件非常简单,我们只需要在CSS文件中使用px作为单位即可。插件会自动将这些px单位的数值转换为相应的视口单位。 css .example { width:100px; height: 200px; font-size: 16px; } 以上示例代码中,宽度、高度和字体大小都使用了px单位。在经过Postcss-px-to-viewport插件的处理后,将会...
简介: 前端使用postcss-px-to-viewport实现移动端或者PC端自适应 安装postcss-px-to-viewport npminstallpostcss-px-to-viewport-S 配置webpack.config.js或者package.json(二选一即可) 方法一:配置webpack.config.js constpostcssPxToViewport=require('postcss-px-to-viewport'); // 引入自适应插件{ // ...
postcss-px-to-viewport是一个插件,用起来非常方便,安装一下插件,搞个配置文件就可以直接用了。 2、postcss-px-to-viewport适配的原理 根据配置将css样式中的px转为vw,从而让页面自适应当前屏幕大小。 3、postcss-px-to-viewport适配使用 (1)安装 1