Use html to write web pages to achieve responsiveness

Recently I discovered a very useful js file that can achieve self-adaptation comparable to complex writing methods, autofit.js

Here’s how to use it

Introduce autofit.js in index.html, and then call it when the page loads

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-user=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Homepage</title>
    <script src="../js/autofit.js"></script>
    <script>
      window.onload = function (ev) {<!-- -->
        init({<!-- -->
          ignore: ['#map'], // means it is not affected by global transform
          dh: 941, //The height of the design draft, the default is 929, if the project is displayed in full screen, it can be set to 1080
          dw: 1920, //The width of the design draft, the default is 1920
          el: '.page-box', // Rendered dom, the default is "#app"
          resize: true // Whether to listen to the resize event, the default is true
        })
      }
    </script>
</head>
<body class="fade-out">
    <div class="page-box">
      //Page elements here
      <div>Text text text text text text....</div>
    </div>
</body>
</html>

autofit.js

let currRenderDom = null
let currelRectification = ''
let currelRectificationLevel = ''
let resizeListener = null
let timer = null
let currScale = 1
let isAutofitRunnig = false
let isElRectification = false

function init (options = {<!-- -->}, isShowInitTip = true) {<!-- -->
  if (isShowInitTip) {<!-- -->
    console.log(
      `%c` + `autofit.js` + ` is running`,
      `font-weight: bold; color: #ffb712; background:linear-gradient(-45deg, #bd34fe 50%, #47caff 50% );background: -webkit-linear-gradient( 120deg, #bd34fe 30%, #41d1ff );background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color:linear-gradient( -45deg, #bd34fe 50%, #47caff 50% ); padding: 8px 12px; border -radius: 4px;`
    )
  }
  const {<!-- -->
    dw = 1920,
    dh = 929,
    el = typeof options === 'string' ? options : '#app',
    resize = true,
    ignore = [],
    transition = 'none',
    delay=0
  } = options
  currRenderDom = el
  let dom = document.querySelector(el)
  if (!dom) {<!-- -->
    console.error(`autofit: '${<!-- -->el}' is not exist`)
    return
  }
  const style = document.createElement('style')
  const ignoreStyle = document.createElement('style')
  style.lang = 'text/css'
  ignoreStyle.lang = 'text/css'
  style.id = 'autofit-style'
  ignoreStyle.id = 'ignoreStyle'
  style.innerHTML = `body {overflow: hidden;}`
  dom.appendChild(style)
  dom.appendChild(ignoreStyle)
  dom.style.height = `${<!-- -->dh}px`
  dom.style.width = `${<!-- -->dw}px`
  dom.style.transformOrigin = `0 0`
  keepFit(dw, dh, dom, ignore)
  resizeListener = () => {<!-- -->
    clearTimeout(timer)
    if (delay != 0)
      timer = setTimeout(() => {<!-- -->
        keepFit(dw, dh, dom, ignore)
        isElRectification & amp; & amp;
          elRectification(currelRectification, currelRectificationLevel)
      }, delay)
    else {<!-- -->
      keepFit(dw, dh, dom, ignore)
      isElRectification & amp; & amp;
        elRectification(currelRectification, currelRectificationLevel)
    }
  }
  resize & amp; & amp; window.addEventListener('resize', resizeListener)
  isAutofitRunnig = true
  setTimeout(() => {<!-- -->
    dom.style.transition = `${<!-- -->transition}s`
  })
}
function off (el = '#app') {<!-- -->
  try {<!-- -->
    isElRectification = false
    window.removeEventListener('resize', resizeListener)
    document.querySelector('#autofit-style').remove()
    document.querySelector(currRenderDom ? currRenderDom : el).style = ''
    isElRectification & amp; & amp; offelRectification()
  } catch (error) {<!-- -->
    console.error(`autofit: Failed to remove normally`, error)
    isAutofitRunnig = false
  }
  isAutofitRunnig & amp; & amp;
    console.log(
      `%c` + `autofit.js` + ` is off`,
      `font-weight: bold;color: #707070; background: #c9c9c9; padding: 8px 12px; border-radius: 4px;`
    )
}

function elRectification (el, level = 1) {<!-- -->
  if (!isAutofitRunnig) {<!-- -->
    console.error('autofit.js: autofit has not been initialized yet')
  }
  !el & amp; & amp; console.error(`autofit.js: bad selector: ${<!-- -->el}`)
  currelRectification = el
  currelRectificationLevel = level
  const currEl = document.querySelectorAll(el)
  if (currEl.length == 0) {<!-- -->
    console.error('autofit.js：elRectification found no element')
    return
  }
  for (let item of currEl) {<!-- -->
    if (!isElRectification) {<!-- -->
      item.originalWidth = item.clientWidth
      item.originalHeight = item.clientHeight
    }
    let rectification = currScale == 1 ? 1 : currScale * level
    item.style.width = `${<!-- -->item.originalWidth * rectification}px`
    item.style.height = `${<!-- -->item.originalHeight * rectification}px`
    item.style.transform = `scale(${<!-- -->1 / currScale})`
    item.style.transformOrigin = `0 0`
  }
  isElRectification = true
}
function offelRectification () {<!-- -->
  if (!currelRectification) return
  for (let item of document.querySelectorAll(currelRectification)) {<!-- -->
    item.style.width = ``
    item.style.height = ``
    item.style.transform = ``
  }
}
function keepFit (dw, dh, dom, ignore) {<!-- -->
  let clientHeight = document.documentElement.clientHeight
  let clientWidth = document.documentElement.clientWidth
  currScale =
    clientWidth / clientHeight < dw / dh ? clientWidth / dw : clientHeight / dh
  dom.style.height = `${<!-- -->clientHeight / currScale}px`
  dom.style.width = `${<!-- -->clientWidth / currScale}px`
  dom.style.transform = `scale(${<!-- -->currScale})`
  for (let item of ignore) {<!-- -->
    let itemEl = item.el || item.dom
    typeof item == 'string' & amp; & amp; (itemEl = item)
    if (!itemEl) {<!-- -->
      console.error(`autofit: bad selector: ${<!-- -->itemEl}`)
      continue
    }
    let realScale = item.scale ? item.scale : 1 / currScale
    let realFontSize = realScale != currScale ? item.fontSize : 'autofit'
    let realWidth = realScale != currScale ? item.width : 'autofit'
    let realHeight = realScale != currScale ? item.height : 'autofit'
    let regex = new RegExp(`${<!-- -->itemEl}(\x20|{)`, 'gm')
    let isIgnored = regex.test(document.querySelector('#ignoreStyle').innerHTML)
    if (isIgnored) {<!-- -->
      continue
    }
    document.querySelector('#ignoreStyle').innerHTML + = `\
${<!-- -->itemEl} {
      transform: scale(${<!-- -->realScale})!important;
      transform-origin: 0 0;
      width: ${<!-- -->realWidth}!important;
      height: ${<!-- -->realHeight}!important;
    }`
    document.querySelector(
      '#ignoreStyle'
    ).innerHTML + = `\
${<!-- -->itemEl} div ,${<!-- -->itemEl} span,${<!-- -->itemEl} a,${< !-- -->itemEl} * {
      font-size: ${<!-- -->realFontSize}px;
    }`
  }
}