let cw = 1920,ch = 1080//默认
let body = document.getElementById('body')
body.style.width = `${
cw}px`
body.style.height = `${
ch}px`
// 对body进行缩放
function windowResize() {
// 窗口宽高
let w = window.innerWidth,
h = window.innerHeight
// 缩放比例
let r = w / cw < h / ch ? w / cw : h / ch
body.style.transform = `scale( ${
r})`
// 因为scale是以body的原中心点为基准进行缩放,所以缩放之后需要调整外边距,使其位于窗口的中心位置
body.style.marginLeft = (-(cw - r * cw) / 2 + (w - r * cw) / 2) + 'px'
body.style.marginTop = (-(ch - r * ch) / 2 + (h - r * ch) / 2) + 'px'
body.style.marginBottom = (-(h > ch ? h : ch - r * ch)) + 'px'
body.style.marginRight = (-(w > cw ? w : cw - r * cw)) + 'px'
}
window.addEventListener("load", windowResize())
// 监听窗口尺寸变化
window.addEventListener('resize', windowResize);
html css 等比例缩放(记录)
猜你喜欢
转载自blog.csdn.net/qq_42107364/article/details/118549988
今日推荐
周排行