手机端、移动端@media 自适应样式的使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

通用手机端样式：

 @media all and (orientation : portrait) { 
/*竖屏*/ 
}
 @media all and (orientation : landscape) { 
/*横屏*/ 
}