为什么我的最小宽度和最大宽度不适用?

时间:2018-04-24 01:50:01

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

我在媒体查询下的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的其他点。

enter image description here

enter image description here

当我将margin-left/right更改为auto时,我得到以下内容: enter image description here

1 个答案:

答案 0 :(得分:0)

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

<强> CSS

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