我怎样才能让我的容器在手机屏幕上看起来不错，而在桌面屏幕上又不坏？答案

【问题标题】：How can I make my container look nice on phone screens and not come out bad on desktop screens?我怎样才能让我的容器在手机屏幕上看起来不错，而在桌面屏幕上又不坏？
【发布时间】：2022-01-04 03:51:34
【问题描述】：

所以我是引导程序的新手。我在网上发现，我可以使用此代码使我的容器在所有屏幕上看起来都一样？

@media (min-width: 1200px) {
        .container-small {
    width: 700px;
}
.container-large {
    width: 1500px;
}
}

有人可以向我解释一下，并告诉我它是如何工作的。

【问题讨论】：

这是一个媒体查询。您可以根据最大宽度编辑页面上的样式。 Here's 更多关于他们的信息。

标签： html css twitter-bootstrap containers grid-system

【解决方案1】：

@media（最小宽度：1200px）{ }

这告诉 PC，当屏幕宽度等于或小于 1200 像素时，您之前在 CSS 中编辑的框将具有不同的行为。

我的意思是，如果我有一个宽度为 500 像素的 div，当然，在手机中看起来不太好，您在使用 @media 的这种方法时可以更改 div 的大小和行为以及包含的元素，而不会影响您在桌面中的原始大小。

https://www.youtube.com/watch?v=6Yh8y0pVfQc&ab_channel=Flux

在这个视频中解释得很好。希望对你有帮助！

【讨论】：