vue移动端项目适配方案（rem） |
您所在的位置：网站首页 › 移动适配rem › vue移动端项目适配方案（rem） |
vue移动端项目适配方案（rem）
|
1. 根据屏幕尺寸，调整根节点字体大小
1.1 方案一，添加如下代码，便可以实现屏幕尺寸变化，html根节点字体大小跟随变化，项目中便可以使用rem单位，使得字体，盒子大小自适应 上述两个方案均可实现移动端自适应的需求，但是需要计算px转换rem，比较麻烦。 通过postcss-pxtorem可以实现自动转换 2.1 npm install postcss-loader postcss-pxtorem -S 2.2 配置vue.coonfig.js const pxRem = require("postcss-pxtorem") module.exports = { css:{ loaderOptions:{ postcss: { //selectorBlackList正则过滤，符合的class不进行rem转化 //单个的css语句需过滤的情况下，可以使用PX或Px单位 plugins:[pxRem({ autoprefixer:{}, rootValue: 75, propList: ["*"],// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部 默认全部处理 selectorBlackList:[".ig-",".dp-"] })] } } } } |
1.2 方案二 使用flexible.js download flexible源码，将其放在plugins文件夹中，然后再main.js中引入，即可。 测试发现，font-size最大54px，查看源码发现 
如果需要适配更大的屏幕，可以修改此值，比如要适配750，可以将其改为750，因为要修改源码中的值，因此建议download 源码，放在plugins中然后进行修改。【本文地址】