javascript - 如果innerWidth <1300，则基于javascript window.resize更改div大小

我正在尝试基于客户端浏览器的innerWidth创建一些响应元素。

例如，如果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";
    };

最佳答案

您应该为此使用CSS Media Queries，而不是JavaScript。

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

/* Default style */
div {
  background-color:yellow;
  width:250px;
}


/* Style for when viewport is at least 1300px wide */
@media screen and (min-width: 1300px) {
  div {
    background-color:green;
    width:750px;
  }
}

<div>Hello</div>

关于javascript - 如果innerWidth <1300，则基于javascript window.resize更改div大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43476871/