css3判断是否是横屏,CSS横竖屏判断

/*横屏*/

@media all and (orientation : landscape) {

.screenS{display: none;}

.screenV{display: block;}

.tk_cont .cont1{width: 8.65rem;height: 5.6rem;background: url(../img/tk_cont2.png) no-repeat top center;background-size: cover;position: absolute;left:0px;top:50%;right: 0px;margin: 0 auto;-webkit-transform: translateY(-50%);position: relative;padding-top: 1px;}

.tk_cont .cont1 .over_cont{width: 7.2rem;height: 85%;margin: 3% auto 0;padding: 2% 0;overflow-y: scroll;}

.tk_cont .cont2{width: 8.65rem;height: 4.15rem;background: url(../img/tk_cont4.png) no-repeat top center;background-size: 100% 100%;position: absolute;left:0px;top:50%;right: 0px;margin: 0 auto;-webkit-transform: translateY(-50%);position: relative;padding-top: 1px;}

.tk_cont .cont2 .p1{font-size: 0.22rem;color: #ca934f;line-height: 0.4rem;margin-left: 2rem;}

.tk_cont .cont2 .title{width:5.89rem;display: block;margin: 0.5rem auto 0.43rem;}

.login_cont{position: absolute;left:0px;top:7.2rem;z-index: 22;width: 100%;}

}

/*竖屏*/

@media all and (orientation : portrait){

.screenS{display: block;}

.screenV{display: none;}

.tk_cont .cont2{width: 6.7rem;height: 3.65rem;background: url(../img/tk_cont3.png) no-repeat top center;background-size: 100% 100%;position: absolute;left:0px;top:50%;right: 0px;margin: 0 auto;-webkit-transform: translateY(-50%);position: relative;padding-top: 1px;}

.tk_cont .cont1{width: 6.7rem;height: 8.86rem;background: url(../img/tk_cont1.png) no-repeat top center;background-size: cover;position: absolute;left:0px;top:50%;right: 0px;margin: 0 auto;-webkit-transform: translateY(-50%);position: relative;padding-top: 1px;}

.tk_cont .cont1 .over_cont{width: 5.6rem;height: 91%;margin: 3% auto 0;padding: 2% 0;overflow-y: scroll;}

.tk_cont .cont2 .p1{font-size: 0.2rem;color: #ca934f;line-height: 0.4rem;margin-left: 1.2rem;}

.tk_cont .cont2 .title{width:5.89rem;display: block;margin: 0.34rem auto 0.43rem;}

}