css自適應(yīng)布局

自適應(yīng)是一個(gè)繁瑣的問(wèn)題，解決的方案也有很多，今天我推薦一個(gè)融合各種自適應(yīng)的優(yōu)點(diǎn)的方法。

/*高度的自適應(yīng)*/
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;}

/*字體的自適應(yīng)*/
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;}
}

這段代碼解決了自適應(yīng)的兩個(gè)問(wèn)題：
1、高度自適應(yīng)
2、字體自適應(yīng)

先來(lái)說(shuō)高度自適應(yīng)：給html元素設(shè)定了一個(gè)font-size，為什么這么做，因?yàn)橛幸粋€(gè)單位叫做rem，就是
以html的font-size為單位，如果它的值為100px，那么1rem=100px,根據(jù)顯示器的寬度，運(yùn)用@media查詢
語(yǔ)句，就能動(dòng)態(tài)改變r(jià)em為單位的高度的改變。

再來(lái)說(shuō)字體適應(yīng)，有一個(gè)單位叫做vw，它的意思是當(dāng)前屏幕的顯示寬/100,比如現(xiàn)在的顯示器是375px的寬，
那么1vw=375/100,他會(huì)跟著屏幕自動(dòng)放大放小。
但是有一個(gè)問(wèn)題就是，橫屏的時(shí)候，字體會(huì)過(guò)大。
所以也運(yùn)用了@media查詢語(yǔ)句，在屏幕過(guò)大的時(shí)候，就換成px為單位的字體。
而且把不同字號(hào)的字體做成一個(gè)class，以后維護(hù)起來(lái)也會(huì)很方便。

用法就是這樣

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