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"  style="height: 1rem;">hello world!</p>