1.媒體查詢：@media only screen and (max-width: ) {},在最初做pc端時，使用各種媒體查詢，因為pc的屏幕分辨率總共就幾種，不嫌麻煩的重復使用類名。有很大的缺陷就是UI給的設計稿寬度是一定的，在做響應式式憑借自己的感覺是一種超級不爽的美感糾結癥。

2.百分比：百分比也是相當的麻煩，還要去各種計算，不是程序員該做的笨重事。

3.em：缺陷是父盒子的百分比。

自己探索了一條自己選擇走的捷徑，不用在擔心寬度和高度不等比例適應，也不用擔心在各分辨率下的布局會出現問題。

首先，我們需要了解rem，style中的calc會計算的屬性，和vw新單位。這裏自己去百度了解。但發現有坑，calc（）中的參數可以px和vw等混用，然而屢試不爽，放棄。

　　　　　　<style>

　　　　　　　　html{

　　　　　　　　　　font-size:calc(50px * 100vw / 640px); //設計稿寬為640px時，font-size為50px；然而發現並沒有效果。所以修改如下：
　　　　　　　　}

　　　　　</style>

送上代碼：<style>

　　　　　　　　html{

　　　　　　　　　　font-size:calc(100vw * 50 / 640); //設計稿寬為640px時，font-size為50px；當改變屏幕寬時，布局會自適應，無論寬高都會等比例響應。
　　　　　　　　}

　　　　　</style>

移動端響應式布局+rem+calc()