['postcss-px-to-viewport',{viewportWidth:750,// (Number) The width of the viewport.viewportHeight:1334,// (Number) The height of the viewport. -- 一般不需要配置unitPrecision:3,// (Number) The decimal numbers to allow the REM units to grow to.viewportUnit:"vw",// (String) Expected ...
在webpack.config.js 中配置# Copy require("postcss-px-to-viewport")({unitToConvert:"px",//需要转换的单位,默认为"px"viewportWidth:750,// 视窗的宽度,对应的是我们设计稿的宽度,一般是750unitPrecision:3,//单位转换后保留的精度propList: [//能转化为vw的属性列表"*"],viewportUnit:"vw",// 希望...
1.下载postcss-px-to-viewport插件 npm install postcss-px-to-viewport --save-dev 2.下载craco (ant design中的) npm install @craco/craco 3.在项目根目录创建一个craco.config.js进行配置 constpxtoviewport =require("postcss-px-to-viewport"); module.exports= { style: { postcss: { plugins: [ /...
尝试在react使用postcss-px-to-viewport自适应布局,全网找遍了,基本上都要react-scripts eject去修改webpack.config.js,或者装一大堆依赖……,最后发现还不行。 这里默认你已经配置好craco,并且已经存在craco.config.js,react脚手架默认的postcss已经是8.x版本了,我这里安装了"postcss": "^7.0.36",8.x版本可以看...
当时你在使用react 的其他的框架的时候就会面临这个问题,就想着流行的 creact-react-app 和 vite 创建的项目 是没有经过移动适配处理的。这两个里面的就要自己去单的处理了。对应处理移动端适配有不少插件就好比:postcss-px-to-viewport ,postcss-pxtorem 等。
配置项: 'postcss-px-to-viewport': { unitToConvert:'px', //要转换的单位,默认是'px' viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750,默认是320 viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 ...
npm install postcss-px-to-viewport --save-dev 配置插件 在React项目的配置文件中(如craco.config.js或config-overrides.js),添加postcss-px-to-viewport插件的配置。例如: javascript const CracoLessPlugin = require("craco-less"); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: ...
在create-react-app 中配置了postcss 用了postcss-px-to-viewport 插件把px转换成vw 但是在使用scss的时候调用了include方法 通过include来获取的scss无法被转换(common.scss中的px不会被转换)。有人遇到过吗 求解答!reactsass 有用关注3收藏 回复 阅读5.4k 1 个回答 ...
postcss-px-to-viewport很好,如果只是开发 H5 项目,那我推荐你用这个工具。但是我们经常会遇到 px 和 vw 共存的情况,比如需要避免 PC 端字体和元素大小相对 H5 等比例放大的时候,我们不能简单地将全部 px 转成 vw,而是选择在 PC 端主要使用 px,在 H5 端主要用 vw。