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

Question

在过去的几天里，我一直在思考和研究一个网站。在调整大小时，我发现该网站做得并不好。我认为从 1024 到 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 文件中。