常用媒体查询以及手机横竖屏监听

媒体查询引入方式

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>

媒体查询，参考部分Bootstrap 框架

当页面大于1200px 时，大屏幕，主要是PC 端

@media (min-width: 1200px) {

}

在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC

@media (min-width: 992px) and (max-width: 1199px) {

}

在768 和991 像素之间的屏幕里，小屏幕，主要是PAD

@media (min-width: 768px) and (max-width: 991px) {

}

在480 和767 像素之间的屏幕里，超小屏幕，主要是手机

@media (min-width: 480px) and (max-width: 767px) {

}

在小于480 像素的屏幕，微小屏幕，更低分辨率的手机

@media (max-width: 479px) {

}

CSS判断手机横竖屏

@media screen and (orientation: portrait) {
竖屏 css
}
@media screen and (orientation: landscape) {
横屏 css
}

JS监听手机横竖屏

横屏监听

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态！');
}
}, false);

移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

竖屏监听

var updateOrientation = function(){
if<
4000
/span>(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('为了更好的体验，请将手机/平板竖过来！');
}else{
$('.landscape-wrap').addClass('hide');
console.log('竖屏状态');
}
};
window.onorientationchange = updateOrientation;