Html 移动视图中的布局发生了巨大变化

我有这个
在PC的普通浏览器中，它看起来不错。
但每当我从inspect切换到mobile view时，它看起来是这样的

：

---

我应该为网站中的所有组件单独实现媒体屏幕吗
如果是，那么为什么标题和某些组件适合移动视图

您不需要为每个出现的项目设置媒体屏幕。诀窍是让它从一开始就具有响应性，然后只要对布局做一些小的修改，如果仍然需要的话，它就会缩小。例如，以这个新闻区域分区为例。您将其放置在其父容器-新闻内容的中心。但是不要使用固定的边距来居中，你需要添加css，这样即使它缩小了，也能保持在中心

例如：

.news_contents {
    width: 100%;
    margin: 0;
    padding: 0;
}
#news_area {
    width: 90%;
    background: #d9d9d9;
    margin: 30px auto!important;
}

[注意：此处只需要使用！重要标记来覆盖一些现有css。此外，这只是一个粗略的示例，向您展示布局。]

将其添加到css中后，news_区域将始终位于其父div的中心，并且两侧都有空间。这就是我从一开始就用响应性设计对其进行编码的意思。本节现在不需要媒体屏幕来再次修改它，因为它可以使用其原始css在所有大小的设备上工作