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

Question

我最近一直在更详细地了解响应式设计。

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

这是我提出的问题，但没有找到答案。

使用引导程序，我似乎需要多次声明 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 重复/三重/等 html 代码。

考虑到有时可以呈现非常大的数据，HTML 代码重复是否会对性能产生影响。（比如说使用像 Angular 这样的框架来迭代和呈现元素列表，因此必须为使用引导程序声明的每个媒体屏幕部分创建元素）

感谢您的宝贵时间。

Answer 1

使用引导程序，您可以调用同一元素上的所有类以使其具有响应能力，而不是为每个类创建单独的 div：

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

尽量不要复制您的 html 内容，尽管有时您只能在别无他法的情况下复制。