css - 菜单和图像上的一些调整大小问题

Question

在过去的几天里，我一直在思考和研究网站。在尝试调整大小时，我发现该网站做得并不好。我认为网站在 1024 x 768 及以上分辨率下应该看起来不错。

因此，当将下面的页面调整为最小尺寸时，您会看到顶部菜单会被压扁。尽管所有菜单项都有足够的空间。而且我还希望图像能够根据窗口大小正确调整大小。

这是链接 http://bit.ly/NpE9cF

有人可以帮我给我一些实用的建议吗？我应该使用 jquery 之类的工具来调整大小吗？或者我可以在 CSS 中解决这些问题吗？

非常感谢。

Answer 1

在 style.css 中，ul#primary li a {} 有一些固定宽度。

将此宽度更改为某个 % 值。并且还添加一些 min-width 以便在一定的调整大小后宽度不会进一步减小。

改变

ul#primary li a {
    display: block;
    float: left;
    margin: 0;
    padding: 20px 20px 11px;
    width: 192px;
}

到

ul#primary li a {
    display: block;
    float: left;
    margin: 0;
    min-width: 100px;
    padding: 20px 20px 11px;
    width: 20%;
}

在 style.css 文件中。