Bootstrap 对比自己的媒体查询（HTML 影响）

Question

我最近在更详细地学习响应式设计。

我已经使用 Bootstrap 并继续使用它，但我想知道 Pros/Cons 和对 HTML 清洁度和可读性的影响（以及它是否影响性能）

这是我想问的问题，但还没有找到答案。

对于bootstrap，似乎我需要多次声明HTML的同一部分，以便我可以为媒体屏幕尺寸应用各自的样式表。

<section class="col-md-8">... more html ...</section>
<section class="col-sm-8">... same HTML above or slightly modified ...</section>
<section class="col-xs-12">... similar idea to sm-8 ... </section>

而使用直接的媒体查询我可以

<section class="my-section> ... some html ... </section>

And then the media queries
@media screen and (max-width: 825px)
    section.my-section { ...adjustment... }
@media screen and (max-width: 760px)
    section.my-section { ...adjustment... }
@media screen and (max-width: 625px)
    section.my-section { ...adjustment... }

可以将这些媒体屏幕分成各自独立的文件，以保持代码更简洁、更独立

那么，鉴于我们自己编写媒体查询需要更多的时间和精力，根据您的经验，什么是更好的选择，或者在什么情况下更好？ (比如说，小型项目与多人参与的大型项目)

或者 Bootstrap 是否有更好的做法可以更好地避免此 HTML duplicated/triplicated/etc html 代码。

考虑到有时可以呈现非常大的数据，HTML代码重复是否对性能有影响。（说使用框架像 Angular 一样迭代和呈现元素列表，因此必须为使用 bootstrap)

声明的每个媒体屏幕部分创建元素

感谢您的宝贵时间。

Answer 1

使用 bootstrap 时，您可以在同一元素上调用所有类以赋予其响应能力，而不是为每个创建单独的 div：

<section class="col-md-8 col-sm-8 col-xs-12">
 YOUR CONTENT HERE
</section>

尽量不要复制您的 html 内容，尽管有时您在别无他法时不得不这样做。

Bootstrap 对比自己的媒体查询（HTML 影响）

Bootstrap vs Own Media Queries (HTML Impact)

css

media-queries

responsive-design

twitter-bootstrap