根据javascript窗口更改div大小。如果innerWidth<；1300

我试图根据客户端浏览器的内部宽度创建一些响应元素

例如，如果innerWidth小于1300px，我希望div的大小增加，否则我希望它保持初始CSS值

我尝试了下面的代码，该代码主动跟踪客户端innerWidth大小，但在达到特定值时不更改元素

我基本上是在某些断点处合并响应元素

function clientWidth(){
    // Get the dimensions of the viewport
    var width = window.innerWidth;
    console.log(width);

};


var widthResult = clientWidth();

window.onresize = clientWidth;

var row1_col_3 = document.getElementById('row1_col_3');

if(widthResult < 1300){
      row1_col_3.style.width = "450px";
} else{
      row1_col_3.style.width = "300px";
    };

函数clientWidth（）{
//获取视口的尺寸
变量宽度=window.innerWidth；
控制台。原木（宽度）；
};
var widthResult=clientWidth（）；
window.onresize=clientWidth；
var row1_col_3=document.getElementById（'row1_col_3'）；
如果（结果<1300）{
行1列3.style.width=“450px”；
}否则{
行1列3.style.width=“300px”；
};

您应该为此使用，而不是JavaScript

运行下面的代码段，然后单击代码段窗口右上方的“完整页面”链接。您将看到背景颜色从黄色变为绿色（假设您的屏幕宽度至少为1300px）

/*默认样式*/
div{
背景颜色：黄色；
宽度：250px；
}
/*视口宽度至少为1300px时的样式*/
@媒体屏幕和屏幕（最小宽度：1300px）{
div{
背景颜色：绿色；
宽度：750px；
}
}

---

Hello

您应该使用而不是JavaScript

运行下面的代码段，然后单击代码段窗口右上方的“完整页面”链接。您将看到背景颜色从黄色变为绿色（假设您的屏幕宽度至少为1300px）

/*默认样式*/
div{
背景颜色：黄色；
宽度：250px；
}
/*视口宽度至少为1300px时的样式*/
@媒体屏幕和屏幕（最小宽度：1300px）{
div{
背景颜色：绿色；
宽度：750px；
}
}

---

你好

为什么要用JS而不是CSS？为什么要用JS而不是CSS？我试图在调整浏览器大小时更改元素的大小，而不是运行页面的设备类型。如果innerWidth小于某个像素值，我只是希望元素的大小增加，并且当再次超过innerWidth值时返回到默认值，这仍然是媒体查询吗？@ACSpeed媒体查询与设备无关。他们可以完全按照你的要求去做。您是否按照我的说明查看代码片段的工作情况？它只是根据视口的宽度而不是设备来更改样式（您喜欢的样式的任何方面）。我做过，我以前也见过媒体查询片段，但当我尝试更改宽度时，它不起作用。我将重试并查看我的代码。出于兴趣，这可以通过JS实现吗？谢谢你的邀请help@ACSpeed我刚刚更新了我的代码片段以调整宽度。您可以看到它工作得很好。@ACSpeed这可以通过JS来完成，但它更高效、更可扩展且使用更简单。我试图在调整浏览器大小时更改元素的大小，而不是运行页面的设备类型。如果innerWidth小于某个像素值，我只是希望元素的大小增加，并且当再次超过innerWidth值时返回到默认值，这仍然是媒体查询吗？@ACSpeed媒体查询与设备无关。他们可以完全按照你的要求去做。您是否按照我的说明查看代码片段的工作情况？它只是根据视口的宽度而不是设备来更改样式（您喜欢的样式的任何方面）。我做过，我以前也见过媒体查询片段，但当我尝试更改宽度时，它不起作用。我将重试并查看我的代码。出于兴趣，这可以通过JS实现吗？谢谢你的邀请help@ACSpeed我刚刚更新了我的代码片段以调整宽度。您可以看到它工作得很好。@ACSpeed这可以通过JS来完成，但是它更高效、更可扩展，并且更易于使用媒体查询。