引导和自己的媒体查询(HTML影响)

Question

我最近更详细地了解了Responsive。

我已经使用过引导，并继续使用它，但我到了一点，我想知道Pros/Cons和影响HTML的清洁度和可读性(以及它是否影响性能)

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

使用引导程序，我似乎需要多次声明相同的HTML部分，这样我就可以为媒体屏幕大小应用相应的StyleSheets。

<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... }

这些媒体屏幕可以被分割成各自的独立文件，以保持代码更干净和更独立。

因此，考虑到编写我们自己的媒体查询需要更多的时间和精力，在您的经验中，有什么更好的选择，或者在什么情况下呢？(比方说，小型项目与具有多个工作人员的大型项目相比)

，还是有更好的引导实践，可以更好地避免这种复制/三重/等的HTML代码.

考虑到有时可以显示非常大的数据，会对HTML代码复制的性能产生影响。(例如，使用一个像角的框架来迭代和呈现元素列表，因此必须为每个使用引导程序声明的媒体屏幕部分创建元素)。

谢谢您抽时间见我。

Answer 1

通过引导，您可以调用同一元素上的所有类来提供响应性，而不是为每个元素创建单独的div：

​

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

​

尽量不要复制您的html内容，尽管有时您只需要在没有其他方法的情况下。