html - 缩小浏览器窗口 - 按钮图标不会出现在它们应该出现的位置

Question

简而言之，当减小浏览器窗口的大小时，对于移动设备 View ，顶部按钮会被推到左侧，客户端名称下方，最后出现在 Menu 子文件夹中。不是网页设计师，虽然我正在努力学习，但我希望看到菜单子(monad)文件夹在按钮最终出现在客户名称下之前更快地使用react。作为我正在尝试重新设计的免费模板，我查看了 style.css 和 responsive.css 但我不确定我应该寻找什么。非常感谢对此事的任何帮助。

http://landonmusicgroup.com/victoria_update_test/index.html

谢谢!

Answer 1

我通常会建议较小的图标，左侧和骑行侧的填充较少。这将创建更小的图标，它们之间的距离更近。您可能必须缩放浏览器以确保在媒体查询中断为 767 像素处的单个菜单按钮之前所有图标都适合。

更有效的选择是根据媒体查询调整图标大小和 Logo 大小。例如，您在该模板中有一个从大约 980 像素到 1300 像素的媒体查询。如果可能，请在您的模板中调整 Logo 大小和图标大小，以确保在该范围内，一切都合适。

如果你喜欢大一点的图标也没关系，你只需要确保大一点的图标和logo在窗口超过1300px之后才会生效。 980px 到 1300px 之间的任何内容都需要更小的图标、更小的标识或完全新的排列以避免换行。

媒体查询是这样使用的:

//This section affects anything bigger than 480px
    @media screen and (min-width: 480px) {
        body {
            //insert width and height
        }
    }

//This section affects anything bigger than 767px
    @media screen and (min-width: 767px) {
        li {
            //insert width and height
        }
    }

//This section affects anything bigger than 980px
    @media screen and (min-width: 980px) {
        li {
            //insert width and height
        }
    }

//This section affects anything bigger than 1300px
    @media screen and (min-width: 1300px) {
        li {
            //insert width and height
        }
    }