时间戳

首页 > 解决方案 > 响应性 CSS 媒体查询或容器？

css - 响应性 CSS 媒体查询或容器？

问题描述

在 CSS 中使用媒体查询与在 CSS 引导程序中使用容器实用程序是否相似？我觉得媒体查询的实现有点荒谬？

媒体查询：https ://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

标签： cssbootstrap-4

解决方案

我希望我没有误解你的问题。

所以：

简介： Bootstrap 基于普通的 css（包括您发布的媒体查询）结合 js 和 html。但是您已经定制了一些类和组件（html 标记）以帮助您。现在这取决于你的意思similar。您可以使用纯 html、css 和 vanilla js 来完成 bootstrap 提供的所有功能（因为这是 bootstrap 所基于的）。但是很多引导功能背后都有很多代码，所以对于其中一些功能来说会相当复杂。

响应：由于引导程序中的容器基于css + js + html（其中一些还包含媒体查询），因此您的 html 容器在默认情况下的行为不会相同（您只能使用一些额外的代码来完成类似的结果）。

您发布的 mdn 链接显示了 css 媒体查询的正常行为。您可以使用它们来扩展引导功能或创建适合您需求的自定义 html 元素（根据具体情况，从头开始创建组件比修改包含大量不需要的功能的组件更容易）。

回到问题上来：一些自定义引导元素集成了一些媒体查询（或其他一些自定义选项，包括 js），它们可能不适用于纯 css，或者很难实现。这就是为什么答案是通用的（作为问题）

结论：尽管在某些情况下引导程序看起来更容易，但我强烈建议您尝试了解 css 的基础知识（包括媒体查询）。从长远来看，当您需要自定义组件或自己创建新的可自定义组件时，这将对您有很大帮助。还有一个建议：如果您需要自定义组件，请尽量避免!importantcss 中的规则。要做到这一点，请尝试理解css 的特殊性。

推荐阅读