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

淩亂°似流年 2023-01-06 13:59 208阅读 0赞

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

####  ####

一, 网易适配方法

> 屏幕宽度/设计稿rem宽度=页面动态font-size值

(function(doc, win) { 
        var docEl = doc.documentElement;
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        recalc = function() { 
          var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
          if(!clientWidth) return;
          docEl.style.fontSize = clientWidth / 7.5 + 'px';
        };
        if(!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);

解释:

> 这样就设置好了每个页面的根fonts-size，因为rem单位是基于根font-size，因此只要确定一种设计稿对应手机的换算，  
> 其余屏幕尺寸均可自动适配。

> 上面我们得出设计稿换算rem的基准值是100，因此只需要把设计稿上的px值除以100即为我们要的rem值。  
> Px/100=rem，所以100px=1rem,25px=0.25rem

##### 二, 手淘适配方法 #####

> 大名鼎鼎的Flexible

引入： 直接引用阿里的CDN文件（或下载到本地引入）

> 设定： 页面不要设定 。Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。

> 换算：假设拿到的设计稿和上述网易的一样都是750，Flexible会把设计稿分为10份，可以理解为页面width=10rem，即1rem=75px，所以根font-size（基准值）=75px。之后的css换算rem公式为:

> px/75=rem,所以100px=100/75=1.33rem,50px=50/75=0.66rem

### 换算工具: ###

> 显然，可以看出px与rem的换算因为基准值的不同而有些复杂，甚至需要借助计算器的辅助。在这里推荐一个换算神器：“cssrem”

cssrem: 配值设置
    
    　　　　px_to_rem - px转rem的单位比例，假设拿到设计稿750，基准值是75，此处就设75
    
    　　　　max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。
    
    
    　　　　available_file_types - 启用此插件的文件类型。[".css", ".less", ".sass", ".scss"]。

(function(doc, win) { 
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() { 
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 32 * (clientWidth / 320) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

#### 网易方案 ####

> 1、拿到设计稿除以100，得到宽度rem值  
> 2、通过给html的style设置font-size，把1里面得到的宽度rem值代入x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px‘;  
> 3、设计稿px/100即可换算为rem  
> 优：通过动态根font-size来做适配，基本无兼容性问题，适配较为精准，换算简便。  
> 劣：无viewport缩放，且针对iPhone的Retina屏没有做适配，导致对一些手机的适配不是很到位。

#### 手淘方案 ####

> 1、拿到设计稿除以10，得到font-size基准值  
> 2、引入flexible  
> 3、不要设置meta的viewport缩放值  
> 4、设计稿px/ font-size基准值，即可换算为rem  
> 优：通过动态根font-size、viewpor、dpr来做适配，无兼容性问题，适配精准。  
> 劣：需要根据设计稿进行基准值换算，在不使用sublime text编辑器插件开发时，单位计算复杂。