如何让我的容器在 phone 屏幕上看起来不错,而不是在桌面屏幕上出现问题?

How can I make my container look nice on phone screens and not come out bad on desktop screens?

所以我是 bootstrap 的新手。我在网上发现我可以通过使用此代码使我的容器在所有屏幕上看起来都一样?

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

谁能给我解释一下并告诉我它是如何工作的。

@media(最小宽度:1200px){ }

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

我的意思是,如果我有一个宽度为 500px 的 div,当然,在手机上看起来不太好,您在使用 @media 的这个方法时可以改变您的尺寸和行为div和包含的元素,不影响你在桌面上的原始大小。

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

这个视频里解释的很好。希望对您有所帮助!