屏幕计算
// 宽度比率
const htmlHeight = Math.max(this.minHeight, document.documentElement.clientHeight);
const heightRath = Math.round((htmlHeight / this.designHeight) * 10000) / 10000;
// 高度比率
const htmlWidth = Math.max(this.minWidth, document.documentElement.clientWidth);
const widthRath = Math.round((htmlWidth / this.designWidth) * 10000) / 10000;
// 设计稿是否是宽屏
const wideScreen = this.designWidth > 1920;
// 设计稿为单屏时:一般情况下,用户屏幕高度达不到1080(非全屏使用且浏览器有状态栏),根字体需按照宽度比率计算
// 注意,此设置只适合办公系统,大屏系统一般都是全屏使用,建议直接使用高度比率
window.pageRath = wideScreen ? heightRath : widthRath;
if (window.pageRath > 1) {
window.pageRath = 1;
}
if (window.pageRath < 0.75) {
// 12 / 16 = 0.75
window.pageRath = 0.75;
}
设置浏览器默认font-size,也是px和rem转换的依据
let width = '100%';
if (wideScreen) {
// 若屏幕宽度小于设计宽度,使用设计宽度(此时有横向滚动条),且需要按照设计稿等比例缩放宽度
if (document.documentElement.clientWidth < this.designWidth) {
width = `${this.designWidth * heightRath}px`;
}
}
document.documentElement.style.cssText = wideScreen
?`width:${width};
height:${htmlHeight}px;
font-size:${window.pageRath * 100}px;
overflow-y:${scollY ? 'auto' : 'hidden'};`
: `width:100%;
height:100%;
min-width:${this.minWidth}px;
min-height:${this.minHeight}px;
font-size:${window.pageRath * 100}px;
overflow-y:${scollY ? 'auto' : 'hidden'};`;
使用
计算当前模块的实际高度,一般用于首页最后一个模块,高度不确定时
设除此模块外剩余高度,为在全屏下的790px
得到此模块实际高度px
const height = document.body.clientHeight - 790 * window.pageRath;