首先,我们需要安装相关的插件: npm install postcss-px-to-viewport -D 在vite.config.js文件中进行配置 importvuefrom'@vitejs/plugin-vue'// vite.config.tsimport{ defineConfig }from'vite'importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusRe...
postcsspxtoviewport({ unitToConvert:'px',//要转化的单位viewportWidth:750,//UI设计稿的宽度unitPrecision:6,//转换后的精度,即小数点位数propList: ['*'],//指定转换的css属性的单位,*代表全部css属性的单位都进行转换viewportUnit:'vw',//指定需要转换成的视窗单位,默认vwfontViewportUnit:'vw',//指定...
postcss-px-to-viewport 是一个 PostCSS 插件,用于将 CSS 中的 px 单位转换为 vw 或vh 单位,从而实现响应式设计。它允许开发者在编写 CSS 时继续使用 px 单位,而插件会自动将这些单位转换为相对于视口(viewport)的 vw 或vh 单位,以适应不同大小的屏幕。
//postcss.config.js文件 module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', //需要转换的单位,默认为"px" viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度 viewportHeight: 1334,//视窗的高度,根据375设备的宽度来指定,一般指定667,也可以不配置 unitPrecisi...
配置postcss-px-to-viewport 插件使页面能自适应缩放 启动预览效果 Vue CLI创建项目 Vue cli 创建项目脚手架 创建成功,启动VScode编辑代码 引入全局样式 App.vue添加全局样式 .home { background: #efefef; height: 100vh; .text { font-size: 20px;...
viewportUnit: 转换后的单位,通常为vw。 selectorBlackList: 不转换的类名,可以在这里添加不需要转换的类名。 minPixelValue: 最小转换值,小于这个值的px不会被转换。 mediaQuery: 是否转换媒体查询中的px,通常设置为false。 4. 在 Vue3 项目中使用 postcss-px-to-viewport ...
viewport,postcss-px-to-viewport就是这样一款优秀的插件,它解决了以上提到的痛点,也满足以上提到的理想要求。它将px转换成视口单位vw,众所周知,vw本质上还是一种百分比单位,100vw即等于100%,即window.innerWidth 第一步:首先下面的是安装的命令: npminstallpostcss-px-to-viewport--save-dev ...
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' ...
postcss-px-to-viewport就是这样一款优秀、高效、简洁的解决方案，它能完美解决上面的三个痛点，高效的将代码中px单位转为rm、rem、vw等视口单位，一份配置文件完美解决适配问题。在Vue项目中一展身手：1.开发环境npm安装插件 npminstallpostcss-px-to-viewport--save-dev2.项目根目录添加配置文件 >node...
1.下载 postcss-px-to-viewport 插件 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({ ...