移动端自适应

摩托佬
66 阅读1分钟 
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script>
      // 基准大小
      const baseSize = 37.5
      // 设置 rem 函数
      function setRem() {
        // 当前页面宽度相对于 375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
        const scale = document.documentElement.clientWidth / 375
        // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
        document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
      }
      // 初始化
      setRem()
      // 改变窗口大小时重新设置 rem
      window.onresize = function () {
        console.log('rem转换')
        setRem()
      }
    </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
avatar
文章
阅读
粉丝