利用css3@media判断设备竖屏还是横屏

遇到个模拟需求模拟手机竖屏提示请横屏，类似在王者中打开h5活动页显示不要竖屏类的需求，可以利用css3中的@media媒体查询完成

// portrait 为判断为竖屏

@media only screen and (orientation: portrait) and (max-width: 768px) {

        // 需求代码

}

// landscape 为判断为横屏

@media only screen and (orientation: landscape) and (max-height: 600px) {

// 需求代码

}

其中后面and（max-width）和（max-height）需要结合业务实际情况写，landscape写max-height主要是避免与pad或pc横屏混淆；竖直屏max-width同理；

横屏提示的图片动画既可以用gif也可以利用css3 animation来实现