当前位置:首页>>h5自适应布局

h5自适应布局

  • 2022-07-14 22:17:18

首先贴出js原生自适应布局的代码:

<script>
    (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 = 100 * (clientWidth / 375) + 'px';
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
         })(document, window);
    </script>

这是rem布局的核心代码。

什么是rem?
rem是个低调的css单位,手淘在移动端的布局是基于rem处理的,当然还要基于viewport的处理,这里暂且不表。rem和em单位一样,都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px,按照转化关系 16px = 1rem。
rem布局非常简单,其基本原理就是根据不同的分辨率,动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果。

这段代码的意思不难理解,获取页面的宽度,然后换算出当前页面的根字体大小。

当然,看到这里可能有很多童鞋有些不理解了,为什么设置375px,为什么设置根字体是100px?

首先说下设置为375px的原因。大家知道,iphone5分辨率为6401136,iphone6的分辨率是7501334,iphone6 Plus的分辨率是1080*1920,需要注意的是,我这里说的分辨率是物理分辨率,而我们项目里使用的是css的逻辑像素,简单理解起来就是物理像素的一半就是逻辑像素,由此可见我这里设置的尺寸标准是iphone6(750/2=375)的。

那问题又来了,为什么设置的是iphone6 的,而不是其他尺寸的?

是这样的,我首先要说明的是,这个375px不是必须的,是可以变化的。我在这里设置成375的原因有两方面,第一是因为我们设计师出的ui图尺寸规格是iphone6 为基准的,第二是设置在375这个标准上,方便向上向下缩放时,展示效果***。总结来说,根据你所在公司的具体情况灵活设置。

再有根字体设置成100px的原因。上面在解释rem的时候我有提到,如果根字体16px,那么1rem=16px,那50px又是多少rem呢,这就要去换算了,显然这样会很麻烦。如果根字体是100px,50px就是0.5rem,这样就省去了换算的麻烦。
因为每个页面都要调用这段js代码,所以将这段代码专门封装在一个js里面,方便调用。

猜你喜欢