小谈移动端自适应

发表于 | 分类于 ，

前言

目前的移动端适配大致分为两个流派
1.通过media去做不同屏幕的css hack
2.Rem高清适配方案

Media

1
2
3
@media only screen and (min-width: 320px) and (max-width: 639px){
    .....
}

缺陷

  • 在大屏手机会觉得页面稍小，小屏手机页面稍大
  • 如果做复杂一点的页面@media查询会非常的多
  • Dom上的元素如果要和背景图片结合位置不好确定

Rem

基于Rem的适配方法，动态改变1rem的值（html font-size的值）来达到适配。这种适配方法也有两种类型，分别以网易和淘宝为例（其实差别不大）

重要：在非根元素下1rem的值相当于根元素的font-size大小。rem适配的原理是等比缩放！！！一般根据宽度

网易流程如下：

  • 确定基础稿，假设基础稿宽度为640px。

  • 在640px的基础稿下，假设一个按钮的宽度为150px，刚才我们说了，rem适配的原理是等比缩放。那么怎么去等比，我们就借助rem这个媒介，我们还提到一般是根据宽度去做缩放，那么我们把rem的计算和宽度建立上联系不就行了？网易的做法是在计算1rem值的时候根据屏幕宽度比来计算。

  • 我们设置在640px的基础稿下1rem = 100px。那么这个按钮的宽度就应该为1.5rem（为什么设置100？其实任何值都行，只是100方便与与计算）。

  • 那么这个视觉稿做成的网页在其他屏幕上怎么去适配呢？我们不知道其他屏幕到底多大呀~这就是我们设置基础稿的原因。再一次强调rem的原理是等比缩放。那么在640的屏幕下1.5rem为按钮的宽度，那么当网页到了320px的屏幕下呢？根据等比缩放原则=》640/320 = 100 / 当前页面1rem的值。

代码实现也就是：

1
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

这样在没个页面安装基准稿等比缩放算出来的1rem的值就能达到页面的适配

淘宝流程如下：

  • 前期步骤和网易一样都是设置先设置基准稿

  • 淘宝还考虑了dpr的影响，一般基准稿是基于iphone的，而iphone这种retina屏幕的dpr为2

  • 淘宝的做法就是动态的去设置meta来缩放，以达到高清适配的目的

    1
    meta.setAttribute('content','initial-scale='+1/dpr +', maximum-scale='+1/dpr +', minimum-scale='+1/dpr +', user-scalable=no');

    这里对页面进行了缩放，就会涉及到图片失帧的问题，所以得用2倍图3倍图写css hack解决，还有一点就是页面根据dpr做了缩放，所以在计算1rem的值的时候得乘上dpr值

  • 那么这里计算rem与网易的区别就出来了，网易是在计算1rem值的时候根据屏幕宽度比来计算，而淘宝的1rem值都是屏幕宽的10份，它在计算1rem的值的时候其实是将元素宽度和屏幕宽度建立联系来计算的。所以淘宝的高清适配方案放在网易上也是可行的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var dpr = window.devicePixelRatio || 1, scale = 1 / dpr;  

    var docEle = document.documentElement;

    var deviceWidth = docEle.clientWidth;

    var metaEle = document.querySelector('meta[name="viewport"]');

    metaEle.setAttribute('content', 'width=' + dpr * deviceWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

    docEle.setAttribute('data-dpr', dpr);     //css hack

    if (deviceWidth > 750) deviceWidth = 750;

    document.documentElement.style.fontSize = deviceWidth * dpr / 7.5 + 'px';

  • 接下来就是计算1rem的值，也就是 基准值（1rem=clientwidth*dpr/10。这里说过任何值都行）

  • 之后布局所用到的位置单位全部用Rem代替（这就和网易的不同了。若有一个750px的div，假设我们算出来的1rem的为50，那么该div的宽度就该写为15rem）转换公式rem=px/ 基准值，这里如果你自己用这种方法的话会发现当你要将px转化为rem时，计算会很麻烦，但是前端构建的强大，less，sass能轻松解决。

Do the best!