2

我有一个标志，旁边有一个菜单：

在此处输入图像描述

这是 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%;}

小屏幕上的图片（您可以看到徽标太大）：

在此处输入图像描述

4

4 回答 4

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;
}

工作示例

注意：一定要放在@media screen and (max-width: 800px) 上面
@media screen and (max-width: 400px)，如上图所示。

请参阅为什么媒体查询的顺序在 CSS 中很重要？有关按顺序放置媒体查询的更多信息。

于 2013-06-19T23:21:51.360 回答
1

诚然，它不是语义...但是您是否研究过可扩展的文本 - FITTEXTJS

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

于 2013-06-20T14:06:41.813 回答
0

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

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

img { max-width: 100%; }

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

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

于 2013-06-19T23:13:43.000 回答
0

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

取而代之的是最小尺寸，尝试将导航堆叠在徽标下方，然后一旦随着屏幕变大而看起来丢失，将菜单像现在一样带到徽标的右侧。这巧妙地解决了任何文本或图像缩放问题，同时增强了小型设备的设计。

我为你整理了一个演示。请务必查看完整预览，以便调整大小并查看新菜单行为。

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

进一步阅读：查看Chris Coyier关于使设计对平板电脑友好的帖子，其中有一些很棒的技巧。

另外，请查看Trent Walton关于类型和触摸的短文。

于 2013-06-22T21:28:29.620 回答