CSS基础之移动端适配问题

随着互联网行业的不断发展，移动互联网的比重越来越大，移动端开发适配问题是困扰大多数开发人员的难点，下面就简单聊聊这个问题：

（1）媒体查询

记得那还是上古时代，在开发pc端网页的时候，当浏览器视图窗口随意缩放的时候，我们要求所看到的页面大小要随窗口大小伸缩或者隐藏，当时，我们的解决方案就是通过媒体查询的方法，获取视图窗口的宽度，根据不同的视图宽度显示不同的宽度。

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

优点

媒体查询可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局

图片便于修改，只需修改css文件

调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点

代码量比较大，维护不方便

为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源

为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

（2）flex弹性布局

设置viewport：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

高度定死，采用px做单位，宽度自适应，随着屏幕宽度的变化，页面也跟着变化，在宽度需要调整的时候使用响应式布局调整就可以实现适配了。

（3）rem+viewport缩放

rem是一个相对于字体大的相对单位，所以需要设置根html元素的字体大小，其他需要适配的元素也设置相应的rem即可。

实现原理：根据rem讲页面放大dpr倍，viewport设置1/dpr。这样页面的宽度，就是设备宽度，device-width,device-width=设备的物理分辨率/(devicePixelRatio * scale)

（4）rem布局

viewport是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

通过以下代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)

!function (d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;
    function e() {
        var h = a.getBoundingClientRect().width, g;
        if (b === 1) {
            h = 720
        }
      if(h>720) h = 720;//设置基准值的极限值
      g = h / 7.2;
      a.style.fontSize = g + "px"
    }
    if (b > 2) {
       b = 3
    } else {
        if (b > 1) {
            b = 2
        } else {
            b = 1
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("resize", function () {
          clearTimeout(f);
          f = setTimeout(e, 200)
    }, false);
    e()
  }(window);

css通过sass预编译，设置量取的px值转化rem的变量$px: (1/100)+rem;

以上就是解决移动适配的四种常见的方法，比较粗浅，继续加油！