移動端適配之rem

現在手機業務的逐漸發展，移動端的業務原來越多，但是我們的手機品牌有很多，同乙個牌子又有很多不同的型號，比如iphone就有從iphone-iphonex多種型號，每種不同型號的手機螢幕大小也不盡相同，很多時候要做適配。

總結一下目前個人用的幾種適配方式：

1.js+less

首先在頁面的頭部加上這麼一段js**：

然後在less中定義乙個常量：@rem:30rem;

當我們在設計稿上量出高度是90px時，那麼在**中這個高度就是90/30rem，在less中可以這麼寫：height:88/@rem;

2.直接使用css控制，

在reset.css中設定html的font-size:50px;

在iphone的設計稿上我們量出是80物理畫素，那麼我們轉化到**中實際應該是40px;但是可以用乙個簡單的辦法：html的font-size是50px，相當於設計稿裡的100px,所以當我們量出設計稿是高度80物理畫素時，我們可以直接在**中寫.8rem；實際上也就是80/100rem。