Css 如何正确使用媒体查询来实现这一结果？

我想用Angular 6构建一个响应性强的网页。我曾试图用bootstrap实现这一点，但失败惨重。所以最终我决定使用media query

这是我的代码：

.width{
宽度：300px；
高度：300px；
显示：内联块；
边框：1px纯蓝色；
}
.1{
宽度：800px；
高度：300px；
边框：1px纯蓝色；
显示：内联块；
}
@仅介质屏幕和（最大宽度：600px）{
.宽度{
背景色：黑色；
宽度：200px；
高度：100px；
}
.1{
宽度：500px；
}
}

你好，我在组件1中。
你好，我在component2。
你好，我在component3。






你好，我在组件4中。
你好，我在组件5中。

我认为您遇到的问题是使用

Ctrl+

希望增加浏览器宽度

Ctrl+

只是为了便于访问而放大文本

要在Chrome中有效管理浏览器/视口宽度，请右键单击页面，选择

Inspect

。打开“检查”窗格后，您的浏览器窗口现在将在页面的右上角显示

宽度x高度

至于您的代码，我无法在您发送的第一个图像中重现结果（它的CSS明显不同于提供的代码片段）

---

为了使这项工作符合您的需要，我建议您深入研究，它相对较新，功能相当强大，因此绝对值得学习。

我认为您需要做的是更好地使用CSS网格，它将允许您使用很少的规则构建布局，基本上没有媒体查询（如果您希望布局始终完全相同）…请看以下内容：

.grid容器{
显示：网格；
网格模板列：重复（3，1fr）；
网格自动行：最小最大值（200px，自动）；
栅隙：20px；
}
.表格项目{
边框：1px实心；
}
.项目5{
格构柱：跨度2；
}
部分{
背景颜色：蓝色；
身高：100%；
颜色：#FFF；
}

内断面
项目2
项目3
项目4
项目5

不要设置硬宽度。使用引导列系统来设置宽度，您已经使用列作为偏移量，所以使用列重新启动。这看起来像是flexbox或css网格/列可以为您解决的问题。@IvanS95……如果我希望项目1中的某些内容完全适合它，那么我可以使用什么css？@AshutoshKumar您只需添加内容，如有必要，只需将其

宽度

和

高度

设置为100%…编辑答案即可显示此内容