看到标题不禁想到了rem...rem有种奇怪的魔力
个人总结适配大体分为两类：
- 缩放类
- 媒体查询类
| 对比 | 缩放类 | 媒体查询类 |
|---|---|---|
| 实现方案 | rem、scale | @media |
| 优点 | 一套代码可以适用不同大小的设备，节约人力 | 在满足看清的情况下，可以展示更多的内容 |
| 缺点 | 在更大的设备下，看到更大的内容，而非更多的内容 | 需要针对不同尺寸段设置单独的css，需要更多的人力投入 |
当前大部分应该使用的rem适配，所以...跟着大家总是没错滴...自己尝试用postcss-pxtorem来做适配
食用方法
通用文件rem.js
function setRem() {
// 设计稿320px 默认大小16px; 320px = 20rem
// 设计稿375px 默认大小37.5px; 375px = 10rem
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / 20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
方法一
package.json配置
// npm install postcss-pxtorem
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 16,
"propList": ["*"]
}
}
},
// main.js
import './rem.js'
方法二
postcss.config.js配置(文件没有自己创建)
// npm install postcss-pxtorem
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 16,
propList: ['*']
}
}
}
// main.js
import './rem.js'
方法三
vue.config.js配置
// npm i amfe-flexible -S npm i postcss-pxtorem -D
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require("autoprefixer")({
// 配置使用 autoprefixer
overrideBrowserslist: ["last 15 versions"]
}),
require("postcss-pxtorem")({
rootValue: 16, // 换算的基数
unitPrecision: 6, // 允许rem单位精度
propWhiteList: [], // 允许换算白名单(空数组表示禁用白名单，全部转换)
propBlackList: [], // 不允许转换名单
exclude: /node_modules/, // 排除文件夹
selectorBlackList: ["ig"], // 忽略的选择器，保留px
// propList: ["*"],
})
]
}
}
}
};
备注：如果报错：Error: PostCSS plugin postcss-pxtorem requires PostCSS 8，切换postcss-pxtorem@5.1.1
