CSS 导航栏媒体查询-

Question

我是一名设计师，现在担任网络开发人员（通过 YT 自学，哈哈） 为我的第一个客户开发导航栏，并努力使其在较小的设备上做出响应，并且对如何控制容器的宽度同时使其内容更小感到困惑。

代码如下，我附上了手机宽度的图片。已经针对笔记本电脑宽度进行了设计和编码。

我是否最好重新设计 MQ 中的按钮，或者只是使用 MQ 将其整体缩小？

笔记本电脑尺寸：

手机尺寸：

Inspector-1200px，导航栏被切断（？）：

Inspector->1200px，导航栏开始丢失徽标下方的按钮：

我没有看到你使用设计中的字体系列。默认字体要宽得多。并且您的按钮应该具有 type 属性。

通常，人们会在移动导航上制作汉堡菜单，因为所有链接都不适合页面，而且设计师的工作也需要提前规划，所以你开始自己制作布局是件好事。

您可以在链接被切断的屏幕上添加一个用于打开菜单的按钮 - 这通常是最佳实践。但您也可以使用“Pixel Perfect”工具。它是浏览器的插件。您添加了很多无用的样式，它们什么也没做 - 找到并删除它们以清理混乱，然后使用上面的解决方案或至少使用 display: flex;弹性包裹：包裹； （但是第二个解决方案看起来很奇怪）。

也有将设计转换为 html/css 的工具，至少我听说过它们。

您应该在样式的开头添加此代码：

body {
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

我建议你去查看免费的 FreeCodeCamp 响应式网页设计课程，因为现在，我认为你应该使用一些工具来为你制作这个布局，否则你会很困难，而且可能没有目的。