css 移动端自适应非rem的一些场景

前言

rem布局确实是非常好的解决方案，对于移动端的自适应能够几乎非常完美的解决不同设备的适配，但是，在实际项目中，由于一些第三方库的使用，会造成冲突，因此，在只能使用px布局的时候，我们会遇到一些需要手动适配的场景。
一般来说，flex布局能够解决大部分场景，但是，也有一些其他场景，需要针对性的处理。

场景一 ：正方形

在移动端的不同设备上，正方形的边长是无法确定的，当只能确定正方形的宽或高的大概比例时（正方形没有宽高，指的是设备方向），就可以使用vh或vw来通过CSS拿到设备的宽或高，vh、vw是CSS3中根据设备高度或宽度定义比例的属性值。

九宫格.png
比如九宫格，高和宽都使用vw布局。

.selector {
  height: 27vw;
  width: 27vw;
  border-radius: 3px;
  background: #eee;
  margin-top: 9px;
}

就可以同时根据设备宽度来适配。
在这里，我一行需要3个，因此排除一些padding之后，大概是设备宽度的27%左右。