媒体查询手机横竖屏

**外链样式：**
<link rel="stylesheet" type="text/css" href="xxx1.css" media="only screen and (max-device-width:480px)">


**内部样式：**
 /* 所有手机横屏 */
@media screen and (orientation: landscape) {
   /*style*/
}

/* 所有手机竖屏 */
@media screen and (orientation : portrait){
	/*style*/
}

/*竖屏和横屏*/
@media only screen 
and ( min-device-width: 414px) /*手机的宽*/
and ( max-device-width: 736px) /*手机的高*/
and (-webkit-min-device-pixel-ratio:3)  {/*横竖屏的比例*/
		/*css*/
}

/*竖屏*/
@media only screen 
and ( min-device-width: 414px ) 
and ( max-device-width: 736px ) 
and (-webkit-min-device-pixel-ratio:3)  
and (orientation:portrait ) {
	/*css*/
}

/*横屏*/
@media only screen 
and ( min-device-width:414 px) 
and ( max-device-width: 736px)
and (-webkit-min-device-pixel-ratio:3)  
and (orientation:landscape) {
/*css*/
}