首先我们选择设备断点进行不同设备的适配，我们设置的断点为800px 和 480px
媒体查询如下：
1）@media only screen and (max-width: 50em) {}
2）@media only screen and (min-width: 30.0625em) and (max-width: 50em) {}
3）@media only screen and (max-width: 30em) {}
大部分同学看到上面的媒体查询会产生疑问为什么断点是 50em 30em呢
下面我来讲解一下：
媒体查询的级别非常高，并非 html的子元素 ， 并不在意html的元素之内 ， 所以媒体查询的默认是浏览器的font-size设置
所以 换算比例为 1rem = 16 px 同时，我们可以选择使用 em 来代替 rem 因为 em的兼容性好 ，所以我们采用em来设置。
