设计稿750px 配置rem

桃扇骨 2022-08-29 09:38 192阅读 0赞

## 设计稿750px 配置rem ##

> 获取设备宽度  
> >750 等于750  
> <320 等于320  
> 设置字体大小 设备宽度/7.5 1rem=100像素  
> // 设计稿是750px  
> // 1rem == 100px的设计稿宽度  
> // 整个屏幕750px宽度7.5rem，屏幕一半的宽度375px就是3.75rem  
> 调用  
> window.onresize = function()\{ 调用 \}

// public/js/rem.js
    function remSize() { 
        let screenWidth = window.document.documentElement.clientWidth || window.innerWidth;
        if (screenWidth > 750) { 
            screenWidth = 750;
        }
        if (screenWidth < 320) { 
            screenWidth = 320
        }
        console.log('screenWidth:', screenWidth);
        document.documentElement.style.fontSize = (screenWidth / 7.5) + 'px';
        document.querySelector('body').style.fontSize = 0.3 + 'rem'
    }
    remSize()
    window.onresize = function () { 
        remSize()
    }

在 public/index.html 里引入js文件

// public/index.html
    <!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="<%= BASE_URL %>favicon.ico">
      <title><%= htmlWebpackPlugin.options.title %></title>
    
    </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>
      
      <script src="<%= BASE_URL %>js/rem.js"></script>
    </body>
    
    </html>

设计稿750px 配置rem

发表评论取消回复

还没有评论，来说两句吧...

相关阅读