Question

我非常擅长编码并试图组建一个基本网站，如果我可以将其用于工作并且看起来不错，我可以将其用作投资组合。

不幸的是，到目前为止，我所拥有的东西看起来很糟糕，除非它是全尺寸的。我想防止它被调整为临时修复，但是min-height和min-width不起作用。到目前为止，我找到的阻止调整大小的解决方案都没有奏效。

我认为这是因为我的代码非常糟糕，但任何人都可以帮我阻止我的页面调整大小吗？

＆＃13;

body {
  background-color: #91bfe6;
  margin:0;
  padding:0;
  color: #fff;
  font-family: "Trebuchet MS",Helvetica,sans-serif; 
}

.container {
  min-width: 1920; 
  min-height: 1080;  
}

.p01 {
  color: #fff;
  text-align: left;
  font-family: "Book Antiqua",Palatino,serif;
  font-size: 13px;
  line-height: 5%;
  letter-spacing: 2px;
}

.p02 {
  color: #fff;
  text-align: right;
  font-family: "Trebuchet MS",Helvetica,sans-serif;
  font-size: 30px;
  line-height: 5%;
  letter-spacing: 8px;
  word-spacing: 30px;   

}

.p03 {
  color: #fff;
  text-align: right;
  font-family: "Book Antiqua",Palatino,serif;
  font-size: 10px;
  position: fixed;
  right: 4px;
  top: 62px;
}

.p04 {
  color: #fff;
  font-family: "Trebuchet MS",Helvetica,sans-serif;
  text-align: left;
  font-size: 32px;
  line-height: 5%;
  letter-spacing: 8px;
  word-spacing: 30px; 
  position: relative;
  top: 15px; 
  z-index: 1;
}

#bottomtext {
  position: fixed;
  bottom: 30px;
  left: 24px;

}


#footer {
  position: fixed;
  right: 4px;
  top: 62px;

}

#header {
  position: fixed;
  left: 24px;
  top: 11px;

}

#links {
  position: fixed;
  right: 112px;
  top: 10px;


}

h1 {
  color: #fff;
  font-family: "Trebuchet MS",Helvetica,sans-serif;
  text-align: left;
  line-height: 5%;
  letter-spacing: 6px;
}

a:link {
  color: #fff;
  text-decoration: none;
}

a:visited {
  color: #fff;
  text-decoration: none;
}


#rectangle {

  background: #834f47;
  position: fixed;
  top: 86px;
  height: calc(100vh - 86px);
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

#img5 {
  position: fixed;
  top: 86px;
  margin-right: 40px;

}

#img6 {
  position: fixed;
  top: 86px;

}

#img7 {
  position: fixed;
  top: 86px;

}



#img8 {
  position: fixed;
  top: 86px;
}

#text {
  text-align: center;
  margin: auto;
  width: 50%;
  padding: 0px;
}

#storememo {
  text-align: center;
  margin: auto;
  width: 50%;
  padding: 0px;
}

#contact {
  display: block;
  margin: auto;
  width: 20%;
}
h1 {
  font-size: 210%;
}

＆＃13;

<div class="container">
  <div id="header">
    <h1><a href="Index.html">MY NAME</a></h1>
    <p class="p01">
      <a href="illustration.html">illustration</a> - <a href="3D.html">3D </a>- <a href="animation.html">animation </a>- <a href="graphicdesign.html">graphic design</a>
    </p>
  </div>   

  <div id="links">
    <p class="p02">
      <a href="about.html">ABOUT </a> | <a href="contact.html"> CONTACT </a> | <a href="storelink.html"> STORE </a>
    </p>
  </div>

  <div id="bottomtext">
    <p class="p04">ILLUSTRATION</p></div>

  <div id="rectangle"></div>

  <div id="img5">
    <a href="placeholder.html">
      <img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
    </a>
  </div>

  <div id="img6">
    <a href="placeholder.html">
      <img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
    </a>
  </div>

  <div id="img7">
    <a href="placeholder.html"><img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
    </a>
  </div>

  <div id="img8">
    <a href="placeholder.html">
      <img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
    </a>
  </div>

  <div id="img9">
    <a href="placeholder.html">
      <img src="placeholder.png" alt="thumbnail" style="width:210px;height:480px;"/>
    </a></div>


  <div id="footer"> 
    <footer>
      <p class="p03">(c) MY NAME </p> 
    </footer> 
  </div>
</div>

＆＃13;

Answer 1

简单的谷歌搜索＆＃34;阻止页面调整大小＆＃34;会引导您将其作为第一个结果：Stop the browser from pushing everything around when I resize

您可以使用CSS min-width和min-height属性指定页面可以显示的最小宽度/高度。如果不满足，则会创建滚动条。

示例：

body {
    min-width: 1920px; 
    min-height: 1080px; 
}

如果浏览器窗口不是1920 * 1080，它将显示它可以显示的内容并为其余部分创建滚动条。

另外， <p04>和<p03>不是html元素。您发送的<p>元素的结束标记只是</p>这些是您可以使用class=''属性为ap元素指定的类名，因此您可以在css中对选择相同的项目进行分组。

Answer 2

我已经看到了你的输出，我可以说尝试在浏览器中使用固定的窗口大小是一个创可贴解决方案，并不会真正解决你的真正问题，即你的div的比例调整大小。 / p>

这不是因为你的编码很糟糕，事实上，这只是一个小问题。您一直在使用像px这样的绝对单位，而不是像％和em这样的相对单位。

绝对单位有一个大小，但无论你如何调整区域大小，它们只能保持这个大小，而相对单位的大小相对于观察端口，这使得它们与视口一起调整大小。

这是一个快速而又肮脏的小提琴：https://jsfiddle.net/oebs8etr/1/

尝试切换到全屏或调整视口大小以查看差异。

HTML

<div class="a">RELATIVE</div>
<div class="b">FIXED</div>

CSS

.a {
  position: absolute;
  background-color: red;
  left: 5%;
  top: 5%;
  width: 25%;
  height: 10%;
  color: #fff;
  font-size: 2.5vw;
}

.b {
  position: absolute;
  background-color: blue;
  left: 27px;
  top: 100px;
  width: 135px;
  height: 70px;
  color: #fff;
  font-size: 13px;
}

容器div无法正常工作（试图阻止我的页面调整大小）

2 个答案: