移动端适配的几种方式比较

不管那种布局方式都需要先设置好meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

• px + %

UI稿一般都是按照p6的尺寸来出图的，直接写px的话，意味着不管在什么机子上，元素的尺寸都是固定的，height: 20px,那么不管在什么设备上元素都是20px，物理尺寸都是一样的（也就是说，换成cm，它们的结果都是一样的）
如果只考虑手机的话，问题不大，p6的的尺寸是375，纵然手机尺寸有差异，但是不会偏差太大，所以效果也都可以接受。
好的，问题来了，怎么实现如下的效果呢

三等分正方形.png
对于宽，想到的就是width: 33%,或者flex，但是高度怎么设置呢，设置%的话肯定是不行的，因为高度设置%，是根据父元素的高度来计算的，这里父元素的高度是根据字元素来填满的，而子元素的高度是不固定的（因为在任何设备上都要显示正方形，width不固定。）
此时，有人想到了用vw，width:33vw,height:33vw,这样不就可以了吗，确实是可以的。在手机上测试效果是OK的。
问题来了，iPad试过了吗？
因为iPad的尺寸和手机的相差比较大，所以我们在iPad上会发现图片显示正方形，没有问题，但是占了1/3页面宽度的图片。显得会很突兀（整个页面会很丑）。
这种方式由于iPad的存在而宣告失败，当然了，产品经理愿意迁就的话，伟大的程序员还是有办法的（哪有这么好说话的产品。。。）

body{
      max-width: 640px;
      min-width: 320px;
}

• rem

rem的处理方式请见我的移动端适配之rem
最后的代码会是这样的

$first-yellow: 75
@function px2rem($px) {
  @return ($px / 15) * 1rem
}
div{
    width: px2rem(750);
    height: px2rem(300)
}

这种方式有一点不好控制的就是font-size，如果某些地方遗漏了font-size属性的话，此时就会继承html的属性，就会很丑（可以想象某个地方的文字和牛一样大）

• vw

viewport.png

vw和vh将viewport分成了100份。
和rem相同的是，都是和某个固定的参照物对比计算的，rem参照html的font-size，vw参照viewport
不同的是，rem的参照值需要去写js计算，viewport是标准支持的，不用进行二次计算。

最后我们的代码应该是这样

$base_vw: 375  //  UI上的宽度
@function vw($px) {
  @return ($px / base_vw) * 100vw
}
div{
    width: vw(200);
    height: vw(50);
    font-size: vw(16);
}

这个还没有在项目中使用过，可能会有些兼容性问题吧
viewport-units-buggyfill