为什么我的最小宽度和最大宽度没有应用？答案

【问题标题】：Why aren't my min-width and max-width applying?为什么我的最小宽度和最大宽度没有应用？
【发布时间】：2018-04-24 22:42:33
【问题描述】：

我在媒体查询下的 css 中应用了最小宽度和最大宽度，以使我的网页保持在某个理想宽度内。但是，我的页面似乎没有观察到我的宽度。我不知道为什么。这是我的代码以及它在大尺寸和小尺寸下的样子。

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 300px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 4px;
}
.contact-right {
    line-height: 0.8em;
    text-align: left;
}
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 4px;
}
.contact-right {
    line-height: 0.8em;
    text-align: right;
}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 992px;
    line-height: 1.2em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 992px;
    line-height: 1.2em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
}
}

如您所见，宽度有一点小于规定的300px，其他点大于992px。

当我将 margin-left/right 更改为 auto 时，我得到以下信息：

【问题讨论】：

考虑到您的 cmets 中的设备，我想您应该使用 max-width 查询而不是 min-width。即 @media only screen and (min-width : 320px) { 应该是 @media only screen and (max-width : 320px) { 等等其他查询。原因是，简单来说，你需要说“如果屏幕尺寸小于320px，则使用以下样式”。
我没有这样做的原因是我不希望我的用户的屏幕低于 320 像素，但我可以看到我的用户的屏幕大于 1200 像素。我可以在 10,000 像素处设置另一个断点，但是当我可以以另一种方式进行时，这似乎很荒谬。我尝试了您的解决方案，但没有任何改变:(

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将 margin-left 和 margin-right 属性设置为 auto，以使元素在网页上居中。

CSS

body{
margin-left:auto;
margin-right:auto;
}

【讨论】：

当我尝试您的解决方案时，我得到了我在上面的问题中显示的结果。我已经对其进行了编辑以向您展示。