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

媒体查询引入方式

<!-- 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;