知识库

Appearance

纯移动端 ​

rem 适配

html
<head>
  <script>
    const setRootFontSize = () => {
      const { style, clientWidth } = document.documentElement
      style.fontSize = `${clientWidth / 375 * 100}px`
    }
    window.onresize = setRootFontSize
    setRootFontSize()
  </script>
</head>

纯 PC 端 ​

rem 适配 ​

html
<head>
  <script>
    const setRootFontSize = () => {
      const { style, clientWidth } = document.documentElement
      style.fontSize = `${clientWidth / 1920 * 100}px`
    }
    window.onresize = setRootFontSize
    setRootFontSize()
  </script>
</head>

vw/vh 适配 ​

混合端 ​

通过媒体查询实现响应式布局