如果innerWidth<更改基于javascript window.resize的div大小。 1300

时间:2017-04-18 15:53:49

标签: javascript response

我尝试根据客户端浏览器的innerWidth创建一些响应元素。

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

我已尝试过以下代码,该代码主动跟踪客户端内部宽度,但在达到特定值时不会更改元素。

我基本上试图在某些断点处加入响应元素。

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";
    };

1 个答案:

答案 0 :(得分:1)

您应该使用 CSS Media Queries ,而不是JavaScript。

运行下面的代码段,然后点击&#34;完整页面&#34;链接在代码段窗口的顶部右侧。您将看到背景颜色从黄色变为绿色(假设您的屏幕宽度至少为1300像素)。

&#13;
&#13;
/* 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;
  }
}
&#13;
<div>Hello</div>
&#13;
&#13;
&#13;