关于兼容第三方的库 1.在引入第三方的库时,在上面配置的 exclude 去掉,表示全部内容进行一个 vw 转换,此时我们会发现我们的视图发生了一定程度的挤压,主要拿 vant 来说,打开 vant 的官网你会发现 vant 在适配时适配的是 375px,而我们的是 750,最最主要的是我们不可能要求 ui 去给我们重新区做 ui 图,所以...
当然,当我们引入一些第三方库的时候,比如vant,上面配置的exclude去掉,表示全部内容进行vw转换,会遇到这样的问题: 像这个TabBar,变得非常的小,被压扁了。 其实vant官网也是给出了关于viewport的适配方案,在github找一个名为vant-demo的项目,可以看到其配置如下: 很尴尬,vant团队的是根据375px的设计稿去做的,理想视口...
vant 是一套轻量、可靠的移动端 Vue 组件库,用于快速开发移动应用。它提供了丰富的 UI 组件,如按钮、对话框、表格等,帮助开发者构建现代化的移动界面。 2. postcss-px-to-viewport 是什么? postcss-px-to-viewport 是一个 PostCSS 插件,它可以将 CSS 中的 px 单位转换为视口单位(vw、vh 等)。这样做的好处...
当然,当我们引入一些第三方库的时候,比如vant,上面配置的exclude去掉,表示全部内容进行vw转换,会遇到这样的问题: 像这个TabBar,变得非常的小,被压扁了。 其实vant官网也是给出了关于viewport的适配方案,在github找一个名为vant-demo的项目,可以看到其配置如下: 很尴尬,vant团队的是...
不是用自动转换插件postcss-px-to-viewport-8-plugin 如何适配不同的屏幕尺寸(vant4 vue3 移动, pc稍微调整) 移动项目 一般是陪的是手机和平板,有可能也会需要适配电脑客户端,介绍下我的思路 1. 基于postcss 去做vw 的适配,这里需要做文件的拆分,要不然无法区分viewportwidth...
使用postcss-px-to-viewport适配时,网上搜的大多都是这种,但我运行后,发现根本找不到file,请问这是什么原因呢? const path = require("path"); module.exports = ({ file }) => { const designWidth = file.includes(path.join("node_modules", "vant")) ? 375 : 750; return { plugins: { autopref...
375:750,unitPrecision:5,// 单位转换后保留的精度propList:['*'],// 能转化为vw的属性列表viewportUnit:'vw',// 希望使用的视口单位fontViewportUnit:'vw',// 字体使用的视口单位selectorBlackList:['ignore-'],// 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。minPixelValue:1,// 设置...
Vant 默认使用 px 作为样式单位,如果需要使用 viewport 单位 (vw, vh, vmin, vmax),推荐使用 postcss-px-to-viewport进行转换。postcss-px-to-viewport是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。 首先我们按照vant官网步骤安装vant,此过程省略。
在Vue项目中，为了实现更好的浏览器和移动端适配，推荐使用Vant库并结合postcss-px-to-viewport插件。首先，随着viewport单位的广泛支持，lib-flexible的过渡方案已不再必要，尤其是其存在的一些问题促使我们转向viewport单位。Vant库默认使用px作为样式单位，但当需要使用vw、vh、vmin、vmax等单位时，postcss-...
解决vant和postcss-px-to-viewport的配合 一般我们的设计稿都是750,而vant的设计稿是375,这就出现一种冲突。以750执行的话,则vant组件会变小 解决办法: 在postcss.config.js里的配置做如下修改,在vant库里,我们依然用375的设计稿的宽度,其它的文件我们依然用750设计稿的宽度。