移动端 rem适配方法

瘦欲@ 提交于 2021-02-10 08:52:23

                    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文件(或下载到本地引入)

  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

  设定: 页面不要设定 。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编辑器插件开发时,单位计算复杂。



备注:
  每个人评判的标准不同。


















易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!