landscape: false, // (String) 横屏时使用的单位 landscapeUnit: 'vw', // (Number) 横屏时使用的视口宽度 landscapeWidth: 568 提示: 当前版本v1.1.1长期未更新,include在vue3项目中实测不生效。不设置或者将其设置成include: undefined 如果控制台报以下错误: 可以通过将 postcss-px-to-viewport 换成 post...
如果需要在媒体查询中也进行转换,可以将mediaQuery配置项设置为true。 适配横屏情况:对于需要支持横屏的设备,可以通过设置landscape配置项来处理横屏情况下的适配问题。例如,可以指定横屏时的视口宽度和视口单位。 三、实例展示 假设有一个设计稿宽度为750px的移动端页面,需要在不同设备上保持布局的一致性。使用postcss...
第三步:删除项目中的node_modules,重新yarn一下拉取依赖文件。 第四步:在.postcssrc.js中配置横屏参数。 module.exports={plugins:{"postcss-import":{},"postcss-url":{},"postcss-aspect-ratio-mini":{},"postcss-cssnext":{},"postcss-px-to-viewport":{viewportWidth:375,viewportHeight:667,unitPrecis...
},'postcss-px-to-viewport': {unitToConvert:'px',// 需要转换的单位,默认为"px"viewportWidth:1920,// 设计稿的视窗宽度unitPrecision:6,// 单位转换后保留的精度propList: ['*'],// 能转化为 vw 的属性列表viewportUnit:'vw',// 希望使用的视窗单位fontViewportUnit:'vw',// 字体使用的视窗单位sele...
postcss-px-to-viewport是一款很优秀的插件,将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的PostCSS插件。 在vite构建的项目中,开发过程中,有个临时需求:将移动端页面适配到横屏的自助机上。 vite中内置了postcss,引入插件如下: css:{postcss:{plugins: [ ...
如果仍然有问题,可以尝试手动设置一些特定元素的字体大小,以避免自动转换。 问题3:媒体查询中的单位没有转换。 解决方案:将 mediaQuery 设置为 true,以允许在媒体查询中转换单位。 问题4:横屏模式下样式不正确。 解决方案:如果项目需要支持横屏模式,确保正确设置了 landscape、landscapeUnit 和landscapeWidth 配置项。
landscape:false// 是否处理横屏情况 } } }; React中使用 引入 importpxtoviewportfrom'postcss-px-to-viewport'; 使用 exportdefaultdefineConfig({ plugins: [react()], css: { postcss: { plugins: [ // 适配不同的设备 pxtoviewport({ unitToConvert:'px',// 要转换的单位 ...
landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1920, // 横屏时使用的视口宽度 }), ] } } }); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25.
如果传入的值是一个数组,那么数组里的值必须为正则 landscape (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit (String) 横屏时使用的单位 landscapeWidth (Number) 横屏时使用的视口宽度 exclude和include是可以一起设置的,将取两者规则的交集。
landscape: false // 是否处理横屏情况 } } }; 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 重新运行项目,使配置文件生效 我们写一段测试代码来验证一下: <template> 测试转换 </template> .test-viewport { width...