Question

我的网页再次出现问题。如果您查看http://masluzz.panamerik.net/，可以在菜单顶部看到橙色和灰色的颜色。

我需要在所有分辨率上看起来都很好，因为当我改变分辨率时，橙色的颜色会比我想要的更多地移动到右侧。

这是我的CSS和带图形预览的直接链接。代码：

#sticky {
    padding: 0.0ex;
    width: 100%;
    clear: both;
    color: #transparent;
    font-size: 2em;
    border-radius: 0.0ex;
    background: url(/img/layout/menu.png) 38.5% 0% repeat-y;
    border-radius: 0.0ex;
}

预览图片链接： http://i.stack.imgur.com/GkHfT.png

Answer 1

我不担心图像并将其更改为CSS代码。当他们想要改变并且更加一致时，它会容易得多。您需要将菜单的背景设为橙色，然后为每个应为橙色的

元素添加一个类。即

<div id='menu'>
    <ul>
         <li class="orange">Option 1</li>
         <li class="orange">Option 2</li>
         <li class="grey">Option 3</li>
    </ul>
</div>

然后你的CSS会看起来像这样。

#menu {background:orange;};
#menu>li {float:left; display:inline-block}
.orange {background:orange;} 
.grey {background:grey;}

由于您正在定义#menu div的背景，因此甚至可以省略.orange。但是，这可能需要对您的网站进行一些清理。我注意到几个订单项的高度不同。在清理完之前，你会遇到背景不正确的问题。

Answer 2

您可以使用媒体查询根据屏幕分辨率更改css代码。

实施例

@media only screen and (min-device-width : 1360px) and (max-device-width : 1366px)
{
    #sticky
    {
       background: url(/img/layout/menu.png) 44.5% 0% repeat-y;
    }
}

这将是在1360和1366px宽的分辨率之间设置橙色背景的宽度。显然你会想要扩大分钟和最大值以满足你的需求。您可以根据需要使用尽可能多的媒体选择器来覆盖您可能需要的任何特定于分辨率的更改。

我原本忘了提到如果你打算使用媒体查询，你需要采取原始的＆＃34;背景：url（/img/layout/menu.png）38.5％0％repeat-y; ＆＃34;如果您希望显示媒体查询，请输出。如果您在此ID选择器的媒体查询之外使用此属性，那么它将覆盖媒体查询内部的内容。在此解决方案的实际应用中，您将需要针对不同显示分辨率的多个媒体查询。

当分辨率改变时，背景会移动

2 个答案: