npm i postcss-px-to-viewport--save-dev 2.在vite.config.ts中添加配置 第一种配置: import pxtovw from 'postcss-px-to-viewport'const loder_pxtovw = pxtovw({//这里是设计稿宽度 自己修改viewportWidth: 1920, viewportUnit: 'vw'})exportdefaultdefineConfig({ plugins: [vue()],css: { postcss: ...
1.下载 postcss-px-to-viewport 插件 npm i postcss-px-to-viewport --save-dev 1. 2.在vite.config.ts中添加配置 第一种配置: import pxtovw from 'postcss-px-to-viewport' const loder_pxtovw = pxtovw({ //这里是设计稿宽度 自己修改 viewportWidth: 1920, viewportUnit: 'vw' }) export default ...
在Vue3项目中使用postcss-px-to-viewport插件可以帮助你将CSS中的px单位转换为基于视口(viewport)的单位,如vw或vh,这对于响应式设计非常有用。以下是根据您的提示,逐步说明如何在Vue3项目中配置和使用postcss-px-to-viewport: 1. 安装postcss-px-to-viewport插件 首先,您需要在Vue3项目中安装postcss-px-to-viewpor...
viewport 方案: postcss-px-to-viewport rem 方案: amfe-flexible + postcss-pxtorem 一.依赖安装 viewport 方案(推荐) postcss-px-to-viewport:自动将 px 转为 viewport npm install @ttou/postcss-px-to-viewport -D rem 方案 amfe-flexible(有宽屏显示竖屏需求则使用 lib-flexible ): 自适应设置根节点字体...
],//在这配置插件内容css: {postcss: {plugins: [postcsspxtoviewport({// 要转化的单位unitToConvert:'px',// UI设计稿的大小viewportWidth:1920,// 转换后的精度unitPrecision:6,// 转换后的单位viewportUnit:'vw',// 字体转换后的单位fontViewportUnit:'vw',// 能转换的属性,*表示所有属性,!border表示...
vue3的项目打算全局加入 viewport,但发现入口文件App.vue中的template中只有如下几行。很迷惑直接放进去,但运行之后又可以了,是vue自动识别然后移动到了中吗?还是必须写在区域,但发现好像随便放都会自动挪到标签中。 # App.vue <template> <RouterView /> </template> vue3响应式bootstrapviewport 有用关注2...
1. 3、然后引入到项目 import ‘amfe-flexible’ 4、到这里适配基本解决,但是我们再写的时候量出来的尺寸都需要除以75rem,这样很烦,这时引入插件postcss-px2rem-exclude解决px2rem的问题,为什么引入postcss-px2rem-exclude,而不是px2rem-loader,当你引入第三方插件库的时候你就知道痛点了,这里先不解释原因,下面...
viewportUnit:"vw", fontViewportUnit:"vw", selectorBlackList: [], minPixelValue:1, mediaQuery:false, replace:true, exclude: /(\/|\\)(node_modules)(\/|\\)/, } } } AI代码助手复制代码 重新运行,打开浏览器查看属性值已经变为vw计算,就是这么简单。
375:750,unitPrecision:5,// 单位转换后保留的精度propList:['*'],// 能转化为vw的属性列表viewportUnit:'vw',// 希望使用的视口单位fontViewportUnit:'vw',// 字体使用的视口单位selectorBlackList:['ignore-'],// 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。minPixelValue:1,// 设置...