Question

我正在学习所有这些，所以我希望你能帮助我解决这个问题。我已将我的徽标添加到导航栏作为空白菜单项上的背景图像（可能是一个笨重的方法，但我能找到最好的解决方案）。它非常适合桌面视图，但我不确定如何在我的移动菜单中调整大小。

您可以在此处查看实际网站：http://www.christinelellis.com

谢谢！恭

Answer 1

由于没有真正的问题，因为我不知道这是如何构建的，所以我将如何解决这个问题：

在菜单上，我会在列表项目上添加一些overflow: hidden（不是非常必要，但至少如果你保持这样，其他按钮不会被图像覆盖它仍然有用。）：

#menu-main-menu li {
   overflow:hidden;
}

和然后使徽标链接流畅与链接中的真实图片（<img>），而不是将徽标图片设置为{{1} （并且很多在 SEO 方面更好，以使图像具有正确的 alt 文本而不是一个background）：

<强> HTML

background-image

然后在 CSS ：

<li id="menu-item-4025" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3215 current_page_item menu-item-4025">
    <a href="http://www.christinelellis.com/">
        <img src="http://www.christinelellis.com/wp-content/uploads/2015/06/main-logo-small.png" alt="christine lellis logo"/>
    </a>
</li>

您必须删除#menu-main-menu li#menu-item-4025 img { display: block; margin: 0 auto; max-width: 300px; width: auto; }链接上的 CSS ，它定义了固定的宽度和固定的高度，将文本踢到a（这在 SEO ...中也非常糟糕。）

这将是一个良好的开端。

祝你好运

Answer 2

如果我是你，我会改变一些事情。首先，我将菜单控制范围放在顶部的标题内，以便它们排成一行。然后，您可以将徽标放在下面。所以它看起来像这样：

 <div id="header" class="header">
      <span class="menu_control>Menu</span>
      // add in rest of the header you have here
 </div>
 <div class="nav_container">
     <div class="outerlogo">
         <div class="innerlogo">
             <img src"http://www.christinelellis.com/wp-content/uploads/2015/06/main-logo-small.png" />
         </div>
     </div>
     // add rest of your html here
  </div>

  css:
  @media (max-width: 900px)
  .menu_control { width: 100%; border-width: 0; background-color: #ffffff; padding: 10px 0px 10px 20px; cursor: pointer; box-sizing: border-box; display: inline-block; max-width: 100px; margin: auto 0px; float: left;

  .outerlogo { width: 100%; height: 100%; display: inline-block; margin: auto 0px; padding: 0px; }

  .innerlogo { margin: auto 0px; display: inline-block; width: 100%; }

  .innerlogo img { width: 90%; max-width: 280px; display: inline-block; vertical-align: middle; margin: auto 0px; }

还要摆脱@media（最大宽度：450px）.menu_control和.header，只需使用最小宽度900px的移动设备，或者将其切换为610px，无论你想做什么。我使用img标签而不是背景图像，因为它更容易操作。

如果您有任何问题，请与我们联系。

Answer 3

您可以使用background-size属性调整背景图片的大小。

要定位较小的（移动）设备，您需要使用Media查询来定位这些设备。

您网站上的一个例子是：

/* smaller screens */
@media only screen and (min-width: 320px) {
    #menu-item-4025 a {
        ...
        background-position: top center;
        background-size: 70% 70%;
        background-repeat: no-repeat;
        background-color: #FFF;
    }
}
/* larger screens */
@media only screen and (min-width: 768px) {
    #menu-item-4025 a {
        ...
        background-size: 100% 100%;
        ...
    }
}

注意您需要根据当前的媒体查询更改320px / 768px断点，但这应该可以帮助您入门。

在移动设备的导航栏中调整徽标大小

3 个答案: