浏览器适配方案
zoom+scale方式
- 需手动设置html下zoom；
- 以设计稿1920*1080为例，核心代码：
let rate = 1920 / window.innerWidth;
//页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
document.getElementsByTagName('body')[0].style.zoom = 1 / rate;
代码中可以直接写设计稿中的px尺寸，无需变更为rem;
手动更改html下font-size方式
- 需要手动设置html下font-size尺寸；
- 代码中凡是尺寸的地方需要用rem;
- 可以借助插件cssrem插件，把设计稿中的px手动转为rem;
/**
*
* @param {*} pwidth 基准宽度
* @param {*} prem 基准字体
* @returns
*/
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth =
document.body.clientWidth || document.documentElement.clientWidth;
if (oWidth > 1920) {
oWidth = 1920;
html.style.fontSize = (oWidth / pwidth) * prem + "px";
return;
} else if (oWidth < 600) {
// 更换布局文件为"/ms1mb/index.html"
// if (location.href.indexOf(".mp4") > -1) {
// } else {
// location.href = "/ms1mb/index.html";
// return;
// }
}
html.style.fontSize = (oWidth / pwidth) * prem + "px";
}
//初始化
getRem(1920, 16);
//改变窗口大小时重新设置 rem,这里最好加上节流
window.onresize = function () {
getRem(1920, 16);
};
自动更改html下font-size方式
- amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10。
- postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。
# VUE_vue 移动端完美适配方案 amfe-flexible + postcss-pxtorem
# Vue3+Vite项目postcss-pxtorem+amfe-flexible实现自适应
- 特别说明的是，代码中方式尺寸的地方，需要使用设计稿中的px尺寸，不能更改为rem尺寸。
- 在运行时会自动px转为rem预览。
- 也适用于移动端的适配。
