首先安装postcss-pxtorem。 npminstallpostcss-pxtorem -D 新建一个postcss.config.js文件配置。 module.exports ={ plugins: {//兼容浏览器,添加前缀autoprefixer: { overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8","last 10 versions",//所有主流浏览器最近10版本...
小颖最近在坐大屏相关的项目,要写适配,之前用的:postcss-px2rem、px2rem-loader,和朋友闲聊呢他说他们也在写大屏,不过他们用的 postcss-pxtorem,在写另外一个项目时,小颖就想着试试 postcss-pxtorem ,结果配置到 vue.config.js 后就报错···如下图所示: 报错分析及解决方案: vue项目安装使用postcss-pxtorem,...
postcss -c config.json // 稍微复杂一点的方式,这里要用 -i 参数,help里面没有,我是从config.json里面的配置猜出来的,官方的那个写法出不来 postcss -u autoprefixer -c p.json -i src/index.css -o index.css // 最复杂的方式 // 还是不写比较好。。。 1. 2. 3. 4. 跟平时想到的效果一样: ...
Vue CLI 2和Vue CLI 3/4的配置方式略有不同,以下是两种配置方式的说明: Vue CLI 2 配置方式 对于Vue CLI 2项目,你需要在vue.config.js文件中配置postcss-pxtorem。首先,确保你的项目根目录下有一个vue.config.js文件,如果没有,请创建一个。然后,在vue.config.js中添加以下配置: javascript // vue.config...
// 一些自定义基础配置 } 1. 2. 3. 4. 5. 使用工具函数 defineConfig import { defineConfig } from 'vite'; export default defineConfig({ // 一些自定义基础配置 }) 1. 2. 3. 4. 2. 开发/生产环境情景配置 使用defineConfig工具函数并以箭头函数作为callback函数接收command, mode, ssrBuild来获取...
一，使用postcss-pxtorem的方法无效原因我的项目是使用vue-cli3创建的，另外，需要注意的是，修改了vue.config.js文件的配置之后，需要重启项目才会生效。安装npminstallpostcss-pxtorem--save 配置 vue-cli3创建的文件，现在改为在vue.config.js文件中进行配置：module.exports={css:{loaderOptions:{postcss...
postcss-pxtorem 的配置还有很多其他选项,可以根据需要进行配置。 三、使用 在配置完成后,就可以在 CSS 文件中使用像素单位了。以下 CSS 代码: ``` width: 750px; font-size: 16px; } ``` 会被postcss-pxtorem 自动转换为: ``` width: 46.875rem; font-size: 1rem; } ``` 750px 会被转换为 46.875...
amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。 二、使用: 1、设置viewport,在index.html中加入下面代码: 如图: 设置viewport截图 2、安装插件: npm install amfe-flexible --save npm install postcss-pxtorem --save 安装老版本报错截图 ...
vue-cli3配置方式: 在根路径下新增postcss.config.js文件(如果有,就不新增) 配置的内容与上相同 如果设计图的宽度是1920,则给rootValue设置192就行,lib-flexible会帮助我们计算好根字体。 postcss-pxtorem也可单独使用,但是相应的我们得自己写一个根字体的计算代码,以及视图窗口大小变化的监听事件,比较起来,还是配合...