媒体查询和 Bootstrap 有什么区别？

Question

奇怪的是，我想知道，CSS3 媒体查询和 Bootstrap 之间的区别是什么。我去过很多网站，但每个人都说，两者都是为了网站的响应能力。如果是出于相同的原因，为什么两者都是为了响应而存在的。我觉得这两者之间存在一些重大差异。谁在两者中的使用量排名第一？媒体查询或引导程序？在我的脑海中毫无间隙地卡住了。求解释！！！

Answer 1

将 Bootstrap 视为网站的框架或骨架，它可以帮助您的布局在某些预设断点处重新排列，以便在不同的屏幕尺寸或设备上以不同的方式显示。它通过使用媒体查询来实现这一点，媒体查询以不同的像素大小重新排列布局的某些元素。

不建议编辑核心引导文件，因此您可以在自己的 CSS 中编写媒体查询来重新设计内容。它们用于在某些条件下将 CSS 样式应用于元素，例如，一旦屏幕宽度降至 414px 以下，这将改变字体大小。

p {
font-size: 12px
}

@media screen and (max-width: 414px) {
        p {
            font-size: 16px;
        }
}

这可以用于多种目的，一个好的用途是增加元素的大小，以便在移动设备上更轻松地使用。

因此，为了将所有内容整合在一起，您可以使用 bootstrap 将 3 列布局分解为适用于移动设备的一列全宽布局。然后，您可以仅使用媒体查询应用特定于该布局的样式。