Question

我只是新来的人，正在创建一个网页。每当我放大时，页面都不会显示滚动按钮，当页面显示> = 300％时，字母会分成两行（图1）。如何使页面像图2一样静态工作，并且当缩小比例小于100％时，宽度仍为100％？

图片1：

图片2：

#Header {
  background-color: #1abbcc;
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  font-size: 32px;
}

body {
  margin: 0;
  font-family: Tahoma;
  width: 100%;
}

span {
  left: 0%;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div id="Header">
  <span>
    CSP Online Practice Environment
  </span>
</div>

Answer 1

这里有一些技巧可以解决您的问题：

1）我们可以通过删除绝对位置来改进样式，您可以在不设置绝对位置的情况下确定位置，绝对位置相对于最近的祖先位置（而不是相对于视口的位置，例如固定位置）。

2）如果我们需要使用绝对值，我们可以通过使用@media only screen and (width : 1024px) { /* Your Styles */ }之类的媒体查询来修复它，也可以查看此答案以获取更多详细信息media query for differant zoom

<!DOCTYPE html>
     <html>
        <head>
            <meta charset = "utf-8" />
            <title> CSP COPE </title>
            <style>
              #Header
              {
                  background-color : #1abbcc;
                  color: white;
                  text-align: center;
                  width: 100%;
                  font-size: 32px;
              }

              body
              {
                  margin: 0;
                  font-family: Tahoma;
                  width: 100%;
              }

              span
              {
                  width: 100%;
                  transform: translateY(-50%);
              }
            </style>
        </head>
 
        <body>
            <div id="Header">
                <span>
                    CSP Online Practice Environment
                </span>
           </div>
        </body>
    </html>

如何放大页面并获得滚动框？

1 个答案: