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

最新推荐文章于 2025-02-23 16:06:02 发布

Hx_toy

最新推荐文章于 2025-02-23 16:06:02 发布

阅读量2.6k

点赞数 1

分类专栏： css

本文链接：https://blog.youkuaiyun.com/webToy/article/details/77773459

版权

css 专栏收录该内容

6 篇文章

订阅专栏

媒体查询引入方式

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