前言

rem布局確實(shí)是非常好的解決方案，對(duì)于移動(dòng)端的自適應(yīng)能夠幾乎非常完美的解決不同設(shè)備的適配，但是，在實(shí)際項(xiàng)目中，由于一些第三方庫(kù)的使用，會(huì)造成沖突，因此，在只能使用px布局的時(shí)候，我們會(huì)遇到一些需要手動(dòng)適配的場(chǎng)景。
一般來(lái)說(shuō)，flex布局能夠解決大部分場(chǎng)景，但是，也有一些其他場(chǎng)景，需要針對(duì)性的處理。

場(chǎng)景一 ：正方形

在移動(dòng)端的不同設(shè)備上，正方形的邊長(zhǎng)是無(wú)法確定的，當(dāng)只能確定正方形的寬或高的大概比例時(shí)（正方形沒(méi)有寬高，指的是設(shè)備方向），就可以使用vh或vw來(lái)通過(guò)CSS拿到設(shè)備的寬或高，vh、vw是CSS3中根據(jù)設(shè)備高度或?qū)挾?/strong>定義比例的屬性值。

九宮格.png

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