html - 导航栏的背景颜色未占据全宽

Question

我设计了一个网站:http://newyorkfairandlovely.com/，它是响应式的。但是当网站在计算机上打开时，导航栏的背景颜色不会显示在整个屏幕上。图片的完整尺寸为 1950 像素宽。当屏幕缩小到 1024px 或更小时就可以了。这是 CSS 代码:

导航{
position:absolute；
左:0；
背景色:#9362ae；
向左飘浮;
宽度:100%；
margin : 0 auto ；
最大宽度:1950px；
font-family: "Source Sans Pro", Helvetica, sans-serif;
}

Answer 1

检查你的括号。您发布的规则嵌套在此之下:

@media 
only screen and (max-width: 1224px),
(min-device-width: 1024px) and (max-device-width: 1824px)  {
    /* your rule is here */
}

因此，一旦屏幕尺寸增加到大于 1224 像素，您的规则就不再适用。

这个例子说明了为什么正确缩进代码是个好主意。