流体布局中的菜单缩放

Question

我的徽标旁边有一个菜单：

这是HTML：

<div id="logomenuwrapper">
<div id="logo"><img src="img/logo_light.jpg"/></div>
<div id="menu">
    <ul>
        <li><a href="#">About</a></li>
        <li class="notfirst"><a href="#">Work</a></li>
        <li class="notfirst"><a href="mailto:maarten@codesigner.be?subject=Hello">Contact</a></li>
    </ul>
</div>
</div>

这是CSS：

#logomenuwrapper{overflow:hidden;}
#logo
{
    padding-right:1.2%;float:left; max-width:100% !important;
    max-height:100% !important;
    display:block;
}
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;}
#menu ul li.notfirst
{
    padding-top:0.3225em;
}

我添加了一些媒体查询，当屏幕变小时会使菜单字体变小。

在某些时候，菜单会比徽标小。我应该添加什么来使徽标与菜单一起缩放？我已添加：

img {max-width:100%;}

在较小的屏幕上看起来如何的图片（因为你可以看到徽标太大了）：

Answer 1

尝试将媒体查询更改为以下内容：

@media screen and (max-width: 800px) {
    body {
        font-size: 85%;
    }
    #logo img {
        width:84%;
    }
}
@media screen and (max-width: 400px) {
    body {
        font-size: 75%;
    }
    #logo img {
        width: 75%;
    }
}

和#logo这样的事情：

#logo {
    padding-right:12px;
    border-right:1px solid #ea4a4a;
    float:left;
}

<强> Working Example

注意：务必将@media screen and (max-width: 800px) 置于之上 @media screen and (max-width: 400px)如上所示。

有关按顺序放置媒体查询的详细信息，请参阅Why do the order of media queries matter in CSS?。

Answer 2

诚然，这不是语义......但你是否考虑过可扩展的文本 - FITTEXTJS

它使用javascript - 但它也允许文本扩展。您已经有了图像的解决方案 - 但我发现问题在于文本本身 - 使用媒体查询可以定义断点，但不会使您的文本像您需要的那样流畅。一旦我从健身房回来，我就会用小提琴编辑我的帖子，只是想我发布这个想法可能会有所帮助。

Answer 3

您应该在媒体查询中设置图像包装器的宽度（在您的情况下为#logo）以获得缩放的图像。或者以百分比全局设置它（参见jsfiddle链接）。

还为所有图片添加max-width: 100%;。

img { max-width: 100%; }

#logo { 
    width: 14%;
    // remove max-width:100. not needed.
    ...
}

请参阅http://jsfiddle.net/weP7u/并调整浏览器大小

Answer 4

我认为你的做法是错误的。为什么在屏幕较小时使文字变小？这可能发生在移动设备上，您需要确保触摸目标足够大，可以可靠地单击菜单。您可以保持文本大小相同，并添加填充/边距以使触摸目标更好，但这使得此菜单在徽标旁边甚至“更大”。

相反，在最小的尺寸下，尝试在徽标下方堆叠导航，然后在屏幕变大时看起来丢失，将菜单放在徽标右侧，就像您现在拥有的那样。这可以很好地解决任何文本或图像缩放问题，同时增强小型设备的设计。

I put together a demo for you。请务必查看完整预览，以便您可以调整大小并查看新的菜单行为。

你可以使用任何你想要的最小尺寸的图案，我选择了一个简单的堆叠图案，因为你的菜单很容易放在一行。如果你将来有更多的导航项目，你可以做一个手风琴，甚至转向画布外的方​​法。

进一步阅读： 查看Chris Coyier's post关于设计平板电脑的设计，以及一些很棒的技巧。

另外，请查看有关类型和触摸的Trent Walton's short post。