移动和桌面响应式标记答案

【问题标题】：Mobile and Desktop responsive markup移动和桌面响应式标记
【发布时间】：2016-02-22 23:19:22
【问题描述】：

我正在开发一个网站，我正在使用引导框架。我希望网站能够响应大多数设备。问题是移动标记与桌面标记不同，不是所有的标记，而是一些块。我该怎么办？重复信息并根据设备显示和隐藏？最佳做法是什么？提前致谢！

例如，我有一个显示相同信息但结构不同的标记，这只是一个示例：

<div class="mobile-show desktop-hide">
<span>Here is my product list</span>
 <ul>
  <li>Item number 1</li>
  <li>Item number 2<li> 
</ul>
<div>


<div class="desktop-show mobile-hide">
 <h1>Here is my product list</h1>
 <div class="icon-block">
   <img src="icon1"></img>
   <img src="icon2"></img>
 </div>
</div>

通过我根据设备显示和隐藏的媒体查询，我担心我正在复制信息，因为它以不同的结构 html 显示，我不知道这是否正确。

【问题讨论】：

对共享的内容使用服务器端代码。无论您使用哪个模板，都只需包含该内容。这样一来，您就可以拥有两个完全不同的桌面/移动模板，并且仍然将您的内容放在一个地方。
我正在使用媒体查询来显示和隐藏 html 块，但不确定这是否是一个好的选择。我也有相同信息的块，但移动和桌面的标记不同，在这种情况下我该怎么办？谢谢。
任何定义该块的内容都应该是该模板和该模板的本地。当我说“内容”时，我的意思就是这样。除了 P 标记或典型的 HTML 样式之外，不应有任何标记。
例如，我有一条信息要显示，但移动端的 html 与桌面端不同，因此我将有一个用于移动端的 html 块和另一个用于桌面端的 html 块，但两个“版本”都显示相同的信息。这是一个好习惯吗？
我要说的是，如果该 HTML 块的样式不同——比如 div 使用不同的类——那么在模板中定义它是正确的。无论 HTML 内容是什么，都应该在任一模板中工作。意思是，您已经在模板中定义了字体、大小等。你的 HTML 应该有相应的行为和反应。

标签： html css

【解决方案1】：

我不会让重复的元素做同样的事情 - 只需为每个元素分配不同的类并在屏幕尺寸上以不同的方式显示它们。请记住，某些课程不会出现在较小的屏幕尺寸上 - 例如col-lg 和 col-md。

<div class="mobile col-lg-8 col-xs-8">
<span>Here is my product list</span>
 <ul>
  <li class="col-xs-6 col-lg-6 col-md-6"><img class="show">Item number 1</li>
  <li class="col-xs-6 col-lg-6 col-md-6"><img class="show">Item number 2<li> 
</ul>
</div>

.show {
display:none;
}
@media only screen and (max-width:480px) {
.show {
display:block;
}
}

【讨论】：