[CSS]自适应手机CSS 横屏和竖屏的书写代码

首先 在模板里面加上<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0"> 这个
然后再CSS里面加入下面代码，分别是竖屏和横屏的CSS代码

这是匹配横屏的状态，横屏时的css代码

@media all and (orientation : landscape) { 
body { 
 
} 
} 

这是匹配竖屏的状态，竖屏时的css代码

@media all and (orientation : portrait){ 
body { 
background-color: #00ff00; 
} 
}