html - 将 div 元素聚集在一起并使其响应

Question

我正在尝试创建一个响应式的基本 404 html 页面。但是，每当我更改屏幕尺寸(或移动设备)时，文本就会重叠。如果这个问题不是很好，我深表歉意；我还在努力学习。

这是我的代码，我还附上了问题图片。

    #holder {
      left: 0;
      position: fixed;
      width: 100%;
      top: 0;
    }
    #div2 {
      width: 50px;
      height: 30px;
      color: #54b1c8;
      font-size: 160%;
      position: fixed;
      top: 44%;
      left: 38.5%;
      font-family: 'exo2';
      -ms-transform: rotate(-66deg);
      /* IE 9 */
      -webkit-transform: rotate(-66deg);
      /* Chrome, Safari, Opera */
      transform: rotate(-66deg);
    }
    #huge {
      position: fixed;
      top: 39%;
      left: 40%;
      color: #54b1c8;
      font-family: 'exo2';
      font-size: 960%;
    }
    #h2 {
      position: fixed;
      top: 57%;
      left: 40%;
      font-family: 'exo2';
      font-size: 360%;
    }

<div id="holder">
  <div id="div2">Error</div>
  <div id="huge">404</div>
  <div id="h2">Not Found</div>
</div>

Answer 1

您可以通过多种不同的方式解决这个问题。

一个好的起点是使用媒体屏幕查询。您可以查找屏幕尺寸表来确定尺寸。

在您的 css 代码中，您可以调用特定的媒体查询来为不同的屏幕尺寸显示不同的 css。

@media only screen and (min-width : 1px) and (max-width : 400px) {

#div {some:css;}

}

@media only screen and (min-width : 401px) and (max-width : 800px) {

#div {some-different:css;}

}

更好的选择是学习如何使用 bootstrap - 一个易于使用的响应式框架。