css自適應布局

自適應是一個繁瑣的問題，解決的方案也有很多，今天我推薦一個融合各種自適應的優點的方法。

/*高度的自適應*/
html{font-size: 100px;}
@media screen and (max-width: 330px){html{font-size: 85px;}}
@media screen and (min-width: 331px) and (max-width: 400px){html{font-size: 100px;}}
@media screen and (min-width: 401px){html{font-size: 110px;}}

*{margin: 0px; padding: 0px;list-style: none;font-family: "微軟雅黑";}
body,ul,li,p,span,em,i,a{ font-family: inherit; font-size: 14px;}

/*字體的自適應*/
body.font_13,ul.font_13,li.font_13,p.font_13,span.font_13,em.font_13,i.font_13,a.font_13{font-size: 13px;}
body.font_15,ul.font_15,li.font_15,p.font_15,span.font_15,em.font_15,i.font_15,a.font_15{font-size: 15px;}
body.font_16,ul.font_16,li.font_16,p.font_16,span.font_16,em.font_16,i.font_16,a.font_16{font-size: 16px;}
body.font_18,ul.font_18,li.font_18,p.font_18,span.font_18,em.font_18,i.font_18,a.font_18{font-size: 18px;}
body.font_20,ul.font_20,li.font_20,p.font_20,span.font_20,em.font_20,i.font_20,a.font_20{font-size: 20px;}
body.font_22,ul.font_22,li.font_22,p.font_22,span.font_22,em.font_22,i.font_22,a.font_22{font-size: 22px;}
body.font_24,ul.font_24,li.font_24,p.font_24,span.font_24,em.font_24,i.font_24,a.font_24{font-size: 22px;}

@media screen and (max-width: 400px){
body,ul,li,p{ font-family: inherit; font-size: 3.7333vw;}
body.font_13,ul.font_13,li.font_13,p.font_13,span.font_13,em.font_13,i.font_13,a.font_13{font-size: 3.46666vw;}    
body.font_15,ul.font_15,li.font_15,p.font_15,span.font_15,em.font_15,i.font_15,a.font_15{font-size: 4vw;}
body.font_16,ul.font_16,li.font_16,p.font_16,span.font_16,em.font_16,i.font_16,a.font_16{font-size: 4.2666vw;}
body.font_18,ul.font_18,li.font_18,p.font_18,span.font_18,em.font_18,i.font_18,a.font_18{font-size: 4.8vw;}
body.font_20,ul.font_20,li.font_20,p.font_20,span.font_20,em.font_20,i.font_20,a.font_20{font-size: 5.333vw;}
body.font_22,ul.font_22,li.font_22,p.font_22,span.font_22,em.font_22,i.font_22,a.font_22{font-size:5.8666vw;}
body.font_24,ul.font_24,li.font_24,p.font_24,span.font_24,em.font_24,i.font_24,a.font_24{font-size: 6.4vw;}
}

這段代碼解決了自適應的兩個問題：
1、高度自適應
2、字體自適應

先來說高度自適應：給html元素設定了一個font-size，為什么這么做，因為有一個單位叫做rem，就是
以html的font-size為單位，如果它的值為100px，那么1rem=100px,根據顯示器的寬度，運用@media查詢
語句，就能動態改變rem為單位的高度的改變。

再來說字體適應，有一個單位叫做vw，它的意思是當前屏幕的顯示寬/100,比如現在的顯示器是375px的寬，
那么1vw=375/100,他會跟著屏幕自動放大放小。
但是有一個問題就是，橫屏的時候，字體會過大。
所以也運用了@media查詢語句，在屏幕過大的時候，就換成px為單位的字體。
而且把不同字號的字體做成一個class，以后維護起來也會很方便。

用法就是這樣

<p class="font_18"  >hello world!</p>