相信大家在使用phone/pad在浏览网页时都有这样的感受，横屏/竖屏看网页时，内容一致，但是排班和样式却大不一样；
这也是移动开发过程需要注意的地方，作为web开发人员需要尽可能优化用户体验，横、竖屏显示就是其中很关键的一项：
利用CSS3中@media媒体查询可以很轻易的实现横竖屏不同样式排版定义

代码如下

      @media all and (orientation : landscape) { 
          h2{color:red;}/*横屏时字体红色*/
       } 

      @media all and (orientation : portrait){ 
         h2{color:green;}/*竖屏时字体绿色*/
       }