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

標籤：參數   需要   width   font   dia   nbsp   高度   問題   修改   

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()