首页 > 代码库 > 用JavaScript操作Media Queries

用JavaScript操作Media Queries

2024-07-03 17:08:50   225人阅读

在响应式（或自适应）设计中要用到Media Queries这个CSS属性，但在某些时候我们需要对Media Queries进行动态操作，这时候可以使用Javascript。

如以下Media Queries的代码：

@media all and (max-width: 700px) {
    body {
        background: #FF0;
    }
}

我们可以使用javascript的window.matchMedia函数来操作Media Queries，该函数现在可以被大部分浏览器（包含IE9以上的版本）支持。

var mq = window.matchMedia(‘@media all and (max-width: 700px)‘);
if(mq.matches) {
    // the width of browser is more then 700px
} else {
    // the width of browser is less then 700px
}
mq.addListener(function(changed) {
    if(changed.matches) {
        // the width of browser is more then 700px
    } else {
        // the width of browser is less then 700px
    }
});

参考： Using Media Queries in JavaScript


联系
我们