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;}
}

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

先來講高度自適應：給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"  style="height: 1rem;">hello world!</p>