javascript实时监听容器的尺寸,防止溢出屏幕

2024年07月21日 建站教程

通过resize事件,实时监听屏幕相关数据。

function refresh () {
  const wh = window.innerHeight
  const ww = window.innerWidth

  const designHeight = 1080
  const designWidth = 1920

  console.log(ww, wh)
  console.log(designWidth, designHeight)
  console.log(ww / designWidth, wh / designHeight)

  const scaleH = wh / designHeight
  const scaleW = ww / designWidth

  const scale = Math.min(scaleH, scaleW).toFixed(6)

  console.log('scale', scale)
  document.getElementById('id').style.transform = `scale(${scale})`
  document.getElementById('id').style.transformOrigin = `50% center`
}
window.addEventListener('resize', refresh)

本文链接:http://so.lmcjl.com/news/8906/

展开阅读全文
相关内容