我在媒体查询下的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的其他点。
答案 0 :(得分:0)
将margin-left和margin-right属性设置为auto,以使网页上的元素居中。
<强> CSS 强>
body{
margin-left:auto;
margin-right:auto;
}