javascript - 尝试在 javascript 中将 div block 宽度更改为屏幕宽度以使其响应

Question

我正在尝试使用 javascript 将名为 Title 的 div block 的宽度更改为屏幕的宽度，这是我的代码:

var Title = document.getElementsByClassName("Title");
var x = 10;

window.onload = function() {
  "use strict";
  while (x < 11) {
    Title.width = screen.width; /* trying to make the width of title the width of screen */
  }
};

  /*This is for the responsivness*/

@media screen and (min-width: 425px) and (max-width: 825px) {
  .Title {
    min-width: 624px;
    width: auto;
  }
  #img {
    display: none;
  }
  #img1 {
    display: none;
  }
  #sizing {
    float: none;
    width: 100%;
  }
  .Text {
    font-size: 30px;
    width: 100%;
  }
  .column {
    width: 25%;
  }
  /* The normal CSS Code */
  .Title {
    background-color: #00BADD;
    max-width: 100%;
    width: 1895px;
    content: "";
    display: table;
    clear: both;
  }
  .column {
    float: left;
    width: 24.3%;
    padding: 20px;
  }

<div class="Title">
  <div class="column">
    <img id="img" align="center" src="An image" alt="Team 7277">
  </div>
  <div class="column">
    <img id="img1" align="center" src="Another Image">
  </div>
  <div class="column" id="sizing">
    <h1 class="Text"> Something <br> Something</h1>
    <h2 class="Text"> Something</h2>
  </div>
  <div class="column">
    <div id="link">
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-instagram"></a>
      <a class="Sum" href="#">Something</a>
    </div>
  </div>
</div>

第一 block 是 Javascript，第二 block 是 CSS，第三 block 是我的 HTML。我想做的是，当屏幕宽度低于 825px 且仍高于 425px 时，将标题设为以下内容，因为这不起作用，由于某种原因标题的宽度总是小于屏幕。

然后我编写了 Javascript 使标题的宽度与屏幕的宽度相同。

我是创建网站的初学者，所以任何帮助和建议将不胜感激。

Answer 1

我想你也许可以在没有 js 的情况下做到这一点，只有 CSS 如果你像 width: 95%; 这样的百分比宽度您可以使用媒体查询为每个屏幕使用特定规则

您可以从 here 查看更多关于媒体查询的信息