Javascript 为什么我的响应式网站不能在手机浏览器上正确显示？

我目前正在一个简单的响应投资组合网站上工作。我使用HTML和CSS网格来布局网站。现在，它可以在桌面视图上正常工作，即使在桌面浏览器中缩小到最小尺寸

然而，当我在我的手机浏览器（iPhone Xs-chrome和safari）上加载页面时，导航栏右侧有空白，图像从页面右侧流出。我需要它在页面范围内，但我被卡住了。我的媒体查询似乎不起作用，我不想创建一个单独的移动HTML和CSS页面

HTML、CSS和Javascript如下所示：

const-toggleButton=document.getElementsByClassName（'toggle-button'）[0]
const navbarLinks=document.getElementsByClassName（'navbar-links'）[0]
toggleButton.addEventListener（'单击'，（）=>{
navbarLinks.classList.toggle（'active'）
})

*{
保证金：0；
填充：0；
}
格雷先生{
背景色：#ebebebeb；
}
navbar先生{
显示器：flex；
位置：相对位置；
证明内容：之间的空间；
对齐项目：居中；
背景色：#ebebebeb；
颜色：#004e98；
最大宽度：1560px；
保证金：0自动；
}
/*品牌名称CSS所有属性*/
.品牌名称{
字体大小：1.7rem；
保证金：1rem 1rem 1rem 30px；
字体大小：粗体；
文字装饰：无；
/*背景颜色：粉红色*/
/*留白，当手机尺寸增大时会影响你名字周围的空间*/
}
a:链接{
文字装饰：无；
颜色：#004e98；
}
a:参观了{
颜色：#004e98；
}
/*品牌名称CSS所有属性结束*/
.导航栏链接{
身高：100%；
}
.导航栏链接{
显示器：flex；
/*使列表水平，而不是垂直*/
右边距：30px；
填充：0；
/*背景颜色：黄色*/
}
.navbar链接李{
列表样式：无；
}
.导航栏链接李a{
显示：块；
文字装饰：无；
颜色：#004e98；
左：2rem；
字号：1.2rem；
}
.navbar链接li a:悬停{
颜色：#ff6700；
}
.品牌名称a：悬停{
颜色：#ff6700；
文字装饰：无；
}
.切换按钮{
位置：绝对位置；
顶部：1.2rem；
右：1rem；
显示：无；
弯曲方向：立柱；
证明内容：之间的空间；
宽度：30px；
高度：21px；
背景颜色：粉红色；
}
.切换按钮.栏{
高度：3倍；
宽度：100%；
背景色：#004e98；
/*单条的颜色*/
边界半径：10px；
}
@介质（最小宽度：600px）{
.内容{
显示：块；
栅隙：10px；
利润率：40px自动；
框大小：边框框；
}
}
@介质（最大宽度：699px）{
navbar先生{
弯曲方向：立柱；
调整项目：灵活启动；
}
.切换按钮{
显示器：flex；
}
.导航栏链接{
显示：无；
宽度：100%；
背景色：白色；
}
.导航栏链接{
宽度：100%；
弯曲方向：立柱；
右边距：0；
/*这将删除适用于大屏幕的边距*/
}
.navbar链接ul li{
文本对齐：居中；
/*背景色：#EC643E；/*下拉列表的橙色bkg颜色*/
*/
}
.navbar链接ul li a{
填充：1rem1rem；
/*边框样式：实心*/
/*边界半径：15px*/
背景色：；
/*蓝色按钮*/
保证金：0；
颜色：#004e98；
}
.navbar-links.active{
显示器：flex；
背景色：#ebebebeb；
}
.navbar链接li a:悬停{
背景色：#ff6700；
/*悬停时的橙色条颜色*/
颜色：白色；
}
}
.内容{
显示：网格；
网格模板列：重复（自动拟合，最小值（400px，1fr））；
栅隙：10px；
最大宽度：1560px；
左侧填充：30px；
右侧填充：30px；
利润率：40px自动；
/*背景色：#ffedba*/
框大小：边框框；
}
img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
边界半径：15px；
}
/*图像覆盖CSS-开始*/
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景：rgba（0,0,0,5）；
/*黑色透视*/
颜色：#f1f1；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.child-a：悬停。覆盖{
不透明度：100；
边界半径：15px；
}
.儿童a{
位置：相对位置；
宽度：100%；
}
/*图像覆盖CSS-结束*/
/*仅背景样式*/
@导入url（'https://fonts.googleapis.com/css?family=Raleway');
* {
字体系列：Raleway，无衬线；
}

代码笔-主页

尝试对其中一个媒体查询进行注释。 查看结果，然后对其他媒体查询进行注释。 如果不起作用，那么尝试更改数字：600和699。

---

增加600或减少699。

尝试更改

.Content

的媒体查询，这也将解决您的菜单问题

查看附带的屏幕截图：

更新：

@media (max-device-width: 640px) and (min-device-width: 320px) {
 .Content {
    display: block !important;
    grid-gap: 10px !important;
    margin: 40px auto !important;
    box-sizing: border-box !important;
 }
}

---

能否添加移动浏览器视图的屏幕截图？希望查看空白和溢出图像是哪些div。当然，如何附加屏幕截图？编辑问题，您应该能够包括它欢迎使用堆栈溢出！这是一个评论，而不是一个答案。回答功能不应用于评论。这不会提供问题的答案。一旦你有足够的钱，你将能够；相反我添加了您对新媒体查询所做的操作，但它仍然不适用于我。你能把你所做的编辑附加到新代码上吗？也许我遗漏了什么。我刚刚添加了（替换为

@media（最小宽度：600px）

）宽度范围并添加了