Web 媒体查询

发表于 分类于 Waline： 阅读次数： 本文字数： 2k 阅读时长 ≈ 2 分钟

css 的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 注意调用顺序，是移动端优先，还是 PC 端优先。
// 分别是：手机，平板竖屏，平板横屏，笔记本。
body{ }
.main{}

@media screen and (min-width: 768px) { 
   body{ }
   .main{}
}
 
@media screen and (min-width: 992px) {
   body{ }
   .main{}
}
 
@media screen and (min-width: 1200px) { 
   body{ }
   .main{}
}

js 的方式

width 查询：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    // js 媒体查询，和CSS一样，也要注意顺序！  
    var sqls = [
        window.matchMedia('(max-width:418px)'),
        window.matchMedia('(max-width:768px)'),
        window.matchMedia('(max-width:992px)'),
        window.matchMedia('(max-width:1200px)'),
        window.matchMedia('(max-width:2000px)')
    ];

    // 切换横竖屏，会走多个选项。
    function mediaMatches() {
        if (sqls[0].matches) {
            // console.log('<=418' + "---iphone 竖屏");
            medialMobile();
        } else if (sqls[1].matches) {
            // console.log('>418 & <=768' + "---ipad mini 竖屏");
            medialMobile();
        } else if (sqls[2].matches) {
            // console.log('>768 & <=992' + "---ipad air 竖屏, ipone 横屏");
            medialMobile();
        } else if (sqls[3].matches) {
            // console.log('> 992 & <=1200' + "---ipad air 横屏， mac F12 模式"); 
            medialMac();
        } else if (sqls[4].matches) {
            // console.log('>1200' + "---mac");
             medialMac();
        } else {
            // console.log('其他');
        }
    };

    for (var i = 0; i < sqls.length; i++) {
        sqls[i].addListener(mediaMatches);
    };

//do something... 
function medialMobile(){};
function medialMac(){};

//页面首次加载
    mediaMatches();

屏幕方向改变：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 屏幕方向改变，重新获取高度（主要是平板上，横竖屏切换）
var mql = window.matchMedia('(orientation: portrait)');

// 监听屏幕模式变化
mql.addListener(handleOrientationChange);

// 输出当前屏幕模式
handleOrientationChange(mql);

function handleOrientationChange(mql) {
    if (mql.matches) {
        // console.log("竖屏 portrait");
        getLength();
    } else {
        // console.log("横屏 landscape");
        getLength();
    }
}

function getLength() {

}