css媒体查询改变上边距,html - CSS宽度和边距不会与媒体查询相加

我正在建立一个博客布局。目标是以窗口为中心，以最大宽度和最小边距为窗口，以内容为中心。

我使用max-width和媒体查询的组合来设置一定阈值的边距。我试着把max-width和fixedmargin-left和margin-right放在一起，但是失败了。

所以，我使用了下面的解决方案，其中有一个max-width与margin-left: auto; margin-right: auto组合，另外还有一个媒体查询，其中设置了margin-left: 2em; margin-right; 2em。

这基本上工作得很好，但我对媒体查询感到非常困惑，我必须定义媒体查询才能使其无缝工作。CSS在下面，您可以看到一个here示例页面。

我希望对于我的内容，使用max-width: 55em;和启动(max-width: 59em)的媒体查询以及2em两边的边距，应该有一个无缝的转换，文本永远不会接触窗口的边框。

在下面的版本中，我到达了一个转换点，在边距开始并文本从边缘缩回之前，文本在窗口边缘接触一定大小的范围。我计算了55+4=59，所以在59，我得到了4em的边框总数，当我把窗口变小时，文本应该从边缘退去；这不会发生。.container {

margin-left: auto;

margin-right: auto;

max-width: 55em;

font-family: monospace;

font-size: 16pt;

line-height: 1.3;

text-align: justify;

}

@media screen and (max-width: 59em) {

.container {

margin-left: 2em;

margin-right: 2em;

}

}

.container {

margin-left: auto;

margin-right: auto;

max-width: 55em;

font-family: monospace;

font-size: 16pt;

line-height: 1.3;

text-align: justify;

}

@media screen and (max-width: 59em) {

.container {

margin-left: 2em;

margin-right: 2em;

}

}

Here is a nice long paragraph which should

certainly hit the wrap limit.

It should do this because it is a long paragraph,

with more words and characters than fit in the

maximum width configured for this page.

I have written multiple sentences in a row, to

ensure that this will take ample screen space horizontally.

I am good at writing like this.

我想要的值如下，您可以看到一个版本here。在这里，除了媒体查询：(max-width: 80em)之外，其他都一样。我来这里纯粹是通过猜测和检查。如果我向下调整窗口大小，我会看到一个平滑的过渡，文本永远不会接近窗口边框，也不会接触到它。

.container {

margin-left: auto;

margin-right: auto;

max-width: 55em;

font-family: monospace;

font-size: 16pt;

line-height: 1.3;

text-align: justify;

}

@media screen and (max-width: 80em) {

.container {

margin-left: 2em;

margin-right: 2em;

}

}

.container {

margin-left: auto;

margin-right: auto;

max-width: 55em;

font-family: monospace;

font-size: 16pt;

line-height: 1.3;

text-align: justify;

}

@media screen and (max-width: 80em) {

.container {

margin-left: 2em;

margin-right: 2em;

}

}

Here is a nice long paragraph which should

certainly hit the wrap limit.

It should do this because it is a long paragraph,

with more words and characters than fit in the

maximum width configured for this page.

I have written multiple sentences in a row, to

ensure that this will take ample screen space horizontally.

I am good at writing like this.

所以，我的问题是下面的一个，一些，或者全部：

我在这里做错什么了？

80-4=55的数学公式是什么？

应该如何实现这个目标呢？

编辑：加一些礼物，因为我不擅长解释。

这是不好的：请注意，有一段时间，因为我正在调整文本在窗口边框上爆炸的位置。我不想要这个。我预计2x2em的边距(宽度为59em)应该会开始产生效果。取而代之的是，在调整大小(也就是某些窗口大小的填充)期间，文本与窗口边框发生碰撞。

这是好的。这有一个带有max-width: 80em的媒体查询。这是我想要的行为。看看文本如何从不触及窗口边框，只是顺利地开始从它后退。80em是一个神奇的数字(至少对我来说，从我桌面上的多个浏览器来看——我不知道这是否是我的问题)。少一点，我会让文本接近边界，然后它会捕捉到我的2em页边距。更多，它是左对齐的，而不是居中的。

最佳答案

那。。。* {

box-sizing: border-box;

/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

}

.container {

width: 100%;

max-width: 800px;

margin-left: auto;

margin-right: auto;

padding: 20px;

border: 1px solid red;

font-family: monospace;

font-size: 16pt;

line-height: 1.3;

text-align: justify;

}

@media screen and (min-width: 900px) {

.container {

/* something else */

}

}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, doloremque iste sequi est autem officia asperiores, illo, vero reiciendis incidunt provident itaque laborum quidem! Aut nisi eaque a itaque numquam.

也许这是一个边界盒的问题。。。。

https://www.paulirish.com/2012/box-sizing-border-box-ftw/

关于html - CSS宽度和边距不会与媒体查询相加，我们在Stack Overflow上找到一个类似的问题：

https://stackoverflow.com/questions/58177218/