postcss-px-to-viewport,可以将px单位自动转换成viewport单位(vw表示屏幕的1%)。 npm install postcss-px-to-viewport --save-dev或者使用yarn安装yarn add postcss-px-to-viewport -D//可能会报错。就是用npm 因为是vue-cli3.0所以找到项目根目录下vue.config.js配置文件,在该文件中写入如下内容 module.exports ...
在安装了postcss-px-to-viewport插件后，你需要进一步配置转换参数，以确保单位转换的准确性。这些参数包括viewport的宽度、视口单位等，你可以根据项目的实际需求进行灵活设置。通过合理配置这些参数，你可以实现更加精确的单位转换，从而优化移动端页面的显示效果。接下来，以vue cli3.x版本为例，我们需要在package.json...
建议大家开始使用viewport来替代此方。 然后就找到了 postcss-px-to-viewport 插件 用于单位的换算 1、插件的安装 1 npm install postcss-px-to-viewport --save-dev && yarn add -D postcss-px-to-viewport 2、在 vue.config.js 中配置参数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18...
">1%", "ie >=8"] }, // 如果你使用rem来实现移动端多设备适配,这个工具可以把px转换为rem "postcss-pxtorem": { rootValue: 100, // 指定转换倍率,我现在设置这个表示1rem=100px; propList: ["*"], // 属性列表,表示你要把哪些css属性的px转换成rem,...
安装完成后,你需要在 Vue 项目的 PostCSS 配置文件中添加 postcss-px-to-viewport 插件。通常情况下,这个配置文件是 postcss.config.js 或在vue.config.js 中的css.postcssOptions 部分。 以下是一个在 postcss.config.js 中进行配置的示例: javascript module.exports = { plugins: { 'postcss-px-to-viewport'...
viewportHeight: 1334,//视窗的高度,根据375设备的宽度来指定,一般指定667,也可以不配置 unitPrecision: 13, // 指定px转换为视窗单位值的小数位数(很多时候无法整除) propList: ['*'], // 能转化为vw的属性列表 viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw ...
配置postcss-px-to-viewport 插件使页面能自适应缩放 启动预览效果 Vue CLI创建项目 Vue cli 创建项目脚手架 创建成功,启动VScode编辑代码 引入全局样式 App.vue添加全局样式 .home { background: #efefef; height: 100vh; .text { font-size: 20px;...
vuecli4使用postcss-px-to-viewport实现vw适配 1.安装 postcss-px-to-viewport npm install postcss-px-to-viewport --save-dev 2.在项目的根目录下创建一个 postcss.config.js 文件 module.exports = { plugins:{ autoprefixer:{}, "postcss-px-to-viewport": { viewportWidth: 375, //视窗的宽度,对应的...
vue中用postcss-px-to-viewport做适配。配置如下 postcss: { plugins: [ autoprefixer(), pxtovw({ viewportWidth: 750, viewportHeight: 1334, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }) ] } 但是我发现,iphone6/...
官方文档: evrone/postcss-px-to-viewport 安装 npm install postcss-px-to-viewport --save-dev vue.config.js module.exports = { css: { loaderOptions: { postcss: