设计稿750px 配置rem

桃扇骨 2022-08-29 09:38 284阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

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

相关阅读

相关 rem 针对设计稿宽度，设计rem调试比例

rem 针对设计稿宽度，设计rem调试比例一, 网易适配方法 > 屏幕宽度/设计稿rem宽度=页面动态font-size值 (function(do

淩亂°似流年/ 2023年01月06日 13:59/ 0 赞/ 204 阅读

相关关于rem支队设计稿宽度，设计rem调式比例

css3规定：1rem的大小就是根元素html的font-size的值通过设置根元素html的font-size的大小，来控制整个html文档内的字体大小，元素宽高，内

电玩女神/ 2023年01月06日 13:59/ 0 赞/ 160 阅读

相关怎么根据甲方设计稿设置Rem比例？

一、什么是rem？ rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们前端常说的适配单位rem。因为rem的

Myth丶恋晨/ 2022年12月27日 04:45/ 0 赞/ 158 阅读

相关最新rem适配H5 750设计稿代码

最新rem适配H5 750设计稿代码，比较严谨，项目中可直接使用，很简单方便 <script> //简单版 // functi

布满荆棘的人生/ 2022年11月20日 01:51/ 0 赞/ 192 阅读

相关 vue定义设计尺寸宽度750（rem）

(function (win) { var tid; function refreshRem() { let designSize

本是古典何须时尚/ 2022年10月16日 10:28/ 0 赞/ 37 阅读

相关设计稿750px 配置rem

设计稿750px 配置rem > 获取设备宽度 > >750 等于750 > <320 等于320 > 设置字体大小设备宽度/7.5 1rem=100像素

桃扇骨/ 2022年08月29日 09:38/ 0 赞/ 285 阅读

相关 px、em、rem

> px、em、rem都是用来描述字体大小的单位 px > px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 > 任意浏

Bertha 。/ 2022年06月01日 04:28/ 0 赞/ 282 阅读

相关移动设备分辨率（终于弄懂了为什么移动端设计稿总是640px和750px）

原文出处：[https://www.cnblogs.com/tu-0718/p/9596894.html][https_www.cnblogs.com_tu-0718_p_95

ゞ浴缸里的玫瑰/ 2022年04月13日 12:51/ 0 赞/ 203 阅读

相关 rem_750

/ fix the code flash the page / var globalWidth = document.documentElement.clie

落日映苍穹つ/ 2021年09月29日 14:04/ 0 赞/ 292 阅读

相关 rem与px转换

//rem换算 function fontSize(res){ let docEl = document.documentElement,

﹏ヽ暗。殇╰゛Y/ 2021年08月30日 23:44/ 0 赞/ 456 阅读