HTML / CSS定位〜屏幕大小/分辨率和浏览器大小调整

2023年3月16日 231次阅读

我最近对
HTML / CSS编码感兴趣并且很快就遇到了一个问题,我似乎无法根据类似于我的其他问题解决或正确理解.

我的定位是基于像素,它应该是百分比？

如何在浏览器缩小时让我的元素和图片停止重新缩放,让它像在每个网站附近一样切断？

如何在绝对和相对定位之间进行选择？

这是我的HTML& CSS：

body {
    font-family: "Courier New", Courier, monospace;
    background: linear-gradient(to bottom, #1D4350 , #A43931);
    background-attachment: scroll;
    
}
html, body, #wrapper {
    min-width: 100%;
    min-height: 100%;
   
}
#content {
    height: 1200px;
}
.Octagon { 
    color: #2aa186;
    text-align: center;
    line-height: 30%;
    margin-top: 25px;
}
.LT {
    text-align: center;
    color: #3a5454;
    line-height: 0%;
    font-style: italic;
}
.boi {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
  right: 16px;
}
.boi:active {
    top: 2px;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
}
.boi:active, 
.iob:active {
    top: 2px;
}
#manyarms {
    position: absolute;
    margin-top: 30px;
    margin-left: 31px;
    width: 310px;
    height: 250px;
}
#sensible {
    position: absolute;
    margin-top: 30px;
    margin-right: 31px;
    width: 310px;
    height: 250px;
    right: 10px;
}
#verr {
    position: absolute;
    margin-left: 31px;
    margin-top: 285px;
    color: #6458b7;
}
#special {
    position: absolute;
    left: 77.9%;
    top: 50%;
    color: #6458b7;
}
.boi:hover,
.iob:hover {
    text-shadow: 0 0 10px #a193ff;
}
#footer {
    padding-left: 95%;
}

<html>
<head>
        <title>The Pragmatic Octopus</title>
        <meta charset="utf-8"/>
    	<link rel='stylesheet' href='style.css'/>
	    <script src='script.js'></script> 
</head>
<body>
<div id="wrapper">
<div id="header">
	    <h1 class="Octagon">The Pragmatic Octopus</h1>
	    <p class="LT">Lee Townsend</p>
        <a href="www.google.com">
	    <p class="boi">Contact</p>
        </a>
        <a href="www.google.com">
    	<p class="iob">Information</p>
        </a>
</div>
<div id="content">
    <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792        .jpg" alt="mmm~" id="manyarms">
    <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" id="sensible">
    <p id="verr">Here comes a very special boi!</p>
    <p id="special">He loves to pose for photos!</p>
</div>
<div id="footer">
    &copy; Hecc
</div>
</div>
</body>
</html>

要么将我的代码修改为所需的代码(我只是看看你做了什么并理解它)或解释我需要做什么.
无论你做什么,谢谢你的阅读和/或协助.

最佳答案你可以改变最小宽度：100％;最小宽度：1000px;在html,body,#wrapper中将最小页面宽度设置为1000px.这将使浏览器在窗口宽度低于1000px时添加滚动条.

仅应用最小宽度：1000px;对于html,body,#wrapper将不适合你,因为你也使用了绝对定位.要解决此添加位置：相对;到#wrapper.

为什么我们需要增加位置：相对; #wrapper？
绝对定位元素将始终基于具有position：relative;的第一个父元素定位.如果没有这个规则,它将只根据身体定位. (https://developer.mozilla.org/de/docs/Web/CSS/position)

要了解有关位置相对和绝对的更多信息,请参阅：https://css-tricks.com/absolute-positioning-inside-relative-positioning/

通过这些更改,您的网站将在浏览器窗口重新开始时停止扩展.宽度为1000像素. Ofc你可以将1000px更改为你想要的任何宽度.

body {
    font-family: "Courier New", Courier, monospace;
    background: linear-gradient(to bottom, #1D4350 , #A43931);
    background-attachment: scroll;
}
html, body, #wrapper {
    min-width: 1000px;
    min-height: 100%;
}
#wrapper {
    position: relative;
    /* max-width: 1200px; Edit 1 */
}
#content {
    height: 1200px;
}
.Octagon { 
    color: #2aa186;
    text-align: center;
    line-height: 30%;
    margin-top: 25px;
}
.LT {
    text-align: center;
    color: #3a5454;
    line-height: 0%;
    font-style: italic;
}
.boi {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
  right: 16px;
}
.boi:active {
    top: 2px;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
}
.boi:active, 
.iob:active {
    top: 2px;
}
/* Edit 2 */
#wrapperForTheFirstImage {
    position: absolute;
    margin-top: 30px;
    margin-left: 31px;
    width: 310px;
    height: 250px;
}
#wrapperForTheSecondImage {
    position: absolute;
    margin-top: 30px;
    margin-right: 31px;
    width: 310px;
    height: 250px;
    right: 10px;
}
/* Removed 
#manyarms {
    position: absolute;
    margin-top: 30px;
    margin-left: 31px;
    width: 310px;
    height: 250px;
}
#sensible {
    position: absolute;
    margin-top: 30px;
    margin-right: 31px;
    width: 310px;
    height: 250px;
    right: 10px;
} */
#verr {
    /*position: absolute;
    margin-left: 31px;
    margin-top: 285px;*/
    color: #6458b7;
}
#special {
    /*position: absolute;
    left: 77.9%;
    top: 50%;*/
    color: #6458b7;
}
/* Edit 2 END */
.boi:hover,
.iob:hover {
    text-shadow: 0 0 10px #a193ff;
}
#footer {
    padding-left: 95%;
}

<html>
<head>
        <title>The Pragmatic Octopus</title>
        <meta charset="utf-8"/>
    	<link rel='stylesheet' href='style.css'/>
	    <script src='script.js'></script> 
</head>
<body>
<div id="wrapper">
<div id="header">
	    <h1 class="Octagon">The Pragmatic Octopus</h1>
	    <p class="LT">Lee Townsend</p>
        <a href="www.google.com">
	    <p class="boi">Contact</p>
        </a>
        <a href="www.google.com">
    	<p class="iob">Information</p>
        </a>
</div>
<div id="content">
    <!-- Edit 2 -->
    <div id="wrapperForTheFirstImage">
        <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792        .jpg" alt="mmm~">
        <p>Here comes a very special boi!</p>
    </div>
    <div id="wrapperForTheSecondImage">
        <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm">
        <p>He loves to pose for photos!</p>
    </div>
    <!-- Edit 2 END -->
</div>
<div id="footer">
    &copy; Hecc
</div>
</div>
</body>
</html>

编辑1：

为#wrapper添加了max-width以提供一个示例(如果我理解正确的话)：

What do I need to do for proper positioning if somebody looks at this
with a higher pixel count screen?

编辑2：

我想我现在知道你想要什么.考虑包装你的< img>和< p>在div内部并分别定位div而不是img和p标签.
我刚刚更新了源代码以提供示例. (并删除了最大宽度的东西)