@return calc(#{$px * 100vmin} / #{$padViewport}); } 然后写一个JS 实现同样的功能 获取设备类型,转换尺寸 import{useWindowSize}from'@vant/use'//vant获取屏幕尺寸,可自行替换import{ref,watch}from'vue'// phone 手机 pad 平板 设备类型exporttypeScreenTypeReutrn='phone'|'pad'// 此尺寸对应 pxT...
vite.config.js配置 import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpostcsspxtoviewport8pluginfrom'postcss-px-to-viewport-8-plugin';// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),],css:{postcss:{plugins:[postcsspxtoviewport8plugin({unitToConvert:'px...
viewport,postcss-px-to-viewport,就可以解决上面说的问题,这个插件主要是将 px 转换为视口单位 vw,vw 是一种百分比单位,100vw 就等于 100%,就是我们的 window.innerWidth,下面是具体的步骤 1 2 vue create myapp ; npminstallpostcss-px-to-viewport -D 在创建脚手架的时候需要特别注意,需要选择 css Pre-pro...
如-webkit-,-moz-等等"postcss-px-to-viewport": {unitToConvert:"px",// 要转化的单位viewportWidth:750,// UI设计稿的宽度unitPrecision:6,// 转换后的精度,即小数点位数propList: ["*"],// 指定转换的css属性的单位,*代表全部css属性的单位都进行转换viewportUnit:"vw",// 指定需要转换成的视窗单位...
'postcss-px-to-viewport': { viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 // viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) ...
第二种方案是viewport,postcss-px-to-viewport就是这样一款优秀的插件,它解决了以上提到的痛点,也满足以上提到的理想要求。它将px转换成视口单位vw,众所周知,vw本质上还是一种百分比单位,100vw即等于100%,即window.innerWidth ...
使用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...
Vant库默认使用px作为样式单位，但当需要使用vw、vh、vmin、vmax等单位时，postcss-px-to-viewport就能派上用场，它是一款PostCSS插件，专门负责px到viewport单位的转换。安装Vant遵循官方指南，这里省略具体步骤。接下来，为了支持px到viewport的转换，你需要安装postcss-px-to-viewport。可以通过npm或yarn...
main.js 添加vant相关组件引用 相应组件添加vant前端代码 配置postcss-px-to-viewport 插件使页面能自适应缩放 启动预览效果 Vue CLI创建项目 Vue cli 创建项目脚手架 创建成功,启动VScode编辑代码 引入全局样式 App.vue添加全局样式 安装Vant及babel-plugin-import插件 ...
Vant 默认使用 px 作为样式单位,如果需要使用 viewport 单位 (vw, vh, vmin, vmax),推荐使用 postcss-px-to-viewport进行转换。postcss-px-to-viewport是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。 首先我们按照vant官网步骤安装vant,此过程省略。