当屏幕低于600像素时，要减小内容周围的空间

Question

我记得当将宽度设置为100％（从台式机到平板电脑再到移动设备）的某些像素大小时，它曾经可以工作。只是不知道为什么我的这次由于某种原因无法正常工作。调整像素大小时，尝试使页眉，内容和页脚为其宽度的100％。

仅供参考，还没到页脚。

*. {
	width: 100%;
}

body {
	font-family: Andale Mono, monospace;
}

p {
	font-size: 24px;
}

.header {
	padding: 200px;
	text-align: center;
	background-color: #001f4d;
}

.header h1 {
	font-size: 64px;
	color: white;
}

.header p {
	color: white;
}

/* Begin main-content */

.content {
	background: #0d0d0d;
	padding: 80px;
	color: white;
}

#main-title {
	text-align: center;
	font-size: 36px;
}

#main-paragraph {
	margin: 400px;
	max-width: 1000px;
	margin: auto;
}

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



/* Small devices (portrait tablets and large phones, 600px and up) */

@media screen and (max-width: 600px) {
	.header {
		width: 100%;
	}

	.content {
		width: 100%;
	}

	#main-paragraph {
		width: 100%;
	}

	.column {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
<head>
	<title>Doug Cannon's Biography</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="header">
		<h1>My Website</h1>
		<p>Welcome to my website.</p>
	</div>

	<div class="content">


		<h2 id="main-title">About Me</h2>
		<p id="main-paragraph">Mollit officia quis officia nostrud culpa ad sunt quis nulla quis esse adipisicing ut. Ullamco mollit ad elit reprehenderit mollit in duis incididunt id sit laboris adipisicing nisi pariatur. Lorem ipsum ea ut qui in ea consectetur id adipisicing quis officia occaecat laboris id velit. Sunt ea irure ex nostrud elit enim dolor in ut anim cillum ad duis.</p>

		<br><br><br>


		<!-- Responsive column cards -->

		<div class="row">

			  <div class="column" style="background-color:#aaa;">
			    <h2>Column 1</h2>
			    <p>Some text..</p>
			  </div>

			  <div class="column" style="background-color:#bbb;">
			    <h2>Column 2</h2>
			    <p>Some text..</p>
			  </div>

			  <div class="column" style="background-color:#ccc;">
			    <h2>Column 3</h2>
			    <p>Some text..</p>
			  </div>

		</div>



	</div> <!-- End main-content -->

	<div class="footer">
		<footer>
	      Douglas Cannon <span class="highlight">&copy; 2019</span>
	    </footer>
	</div>

</body>
</html>

Answer 1

我知道这里发生了什么！

您的标头具有 200px 的填充，内容具有 80px 。当窗口的宽度高于 600像素时，内容和标头的宽度为auto，因此它是容器的宽度（<body>）减< / strong> 200px / 80px的填充，并且由于填充位于宽度的外部，因此它们很好地填充了窗口的宽度！

然后，当窗口尺寸小于600px时，标题和内容的宽度设置为容器的100％，但是200px / 80px的填充位于此100％的外部因此元素占用了更多空间！如果将box-sizing设置为border-box，则填充物会放在里面，并且当窗口宽度更改时，您不会看到任何更改。

我想您要做的是减少填充，而不是将宽度设为100％，以使内容更宽！另外，您可能想对<body>上的8px的空白做一些事情，因为这就是为什么整个页面上都留有空白的原因。

我希望我做对了：）

Answer 2

当屏幕低于600像素时，要减小内容周围的空间

float half = 0.5;
float c0Scaled = half*coeffs->c0;
float c1Scaled = tempScaled*coeffs->c1;
return c0Scaled + c1Scaled;

*. {
	width: 100%;
}

body {
	font-family: Andale Mono, monospace;
    margin: 0;
}

p {
	font-size: 24px;
}

.header {
	padding: 80px;
	text-align: center;
	background: #001f4d;
}

.header h1 {
	font-size: 64px;
	color: white;
}

.header p {
	color: white;
}

/* Begin main-content */

.content {
	background: #0d0d0d;
	padding: 80px;
	color: white;
}

#main-title {
	text-align: center;
	font-size: 36px;
}

#main-paragraph {
	max-width: 1000px;
	margin: auto;
}

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
	background: #001f4d;
	padding: 80px;
	color: white;
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media screen and (max-width: 600px) {
	.header {
		padding: 40px;
	}

	.content {
		padding: 40px;
	}
  
  .footer {
    padding: 40px;
  }
}

调整浏览器大小时，Div不允许宽度为100％

2 个答案:

当屏幕低于600像素时，要减小内容周围的空间