Javascript媒体查询

Question

我正在尝试使用JavaScript实现媒体查询，因为我正在设计的浏览器不支持它。我不太确定我做错了什么，我已经用尽了我的选择，无论如何这里是我的代码

if(window.innerWidth > 1000 && window.innerWidth < 1300) {

    document.getElementById('id').style.height="50px";

 } 

Answer 1

如果宽度大于1000和1300，您要求浏览器更改元素的高度。这不起作用。你可以尝试这样的事情：

if(window.innerWidth > 1000) {

    document.getElementById('id').style.height="50px";

} 

我认为你问的是：

if(window.innerWidth > 1000 && window.innerHeight > 1300) {

    document.getElementById('id').style.height="50px";

} 

为了获得更好的结果，您应该添加一个事件监听器

window.onresize = function(event) {
    if(window.innerWidth > 1000 && window.innerHeight > 1300) {
        document.getElementById('id').style.height="50px";
    }
};