Question

我最近更多地了解了响应式设计。

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

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

使用bootstrap，似乎我需要多次声明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... }

这些媒体屏幕可以分成相应的单独文件，以保持代码更清晰，更自包含

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

或者是否有更好的Bootstrap实践，可以更好地避免这种HTML重复/三重/等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影响）

1 个答案: