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

媒体查询引入方式

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