响应式设计：使用媒体查询或jQuery更改标记？

无论是媒体查询还是jQuery，我都想更改HTML标记。 我不确定什么是最好的选择。

我目前的HTML标记：

 
 
.....
 
.....
 
 
 
.....
 
.....
 
  

对于移动纵向方向，我想在

保留一个

，以便将原始的2

转换为4

，如下所示：

 
 
 
.....
 
 
 
.....
 
 
 
.....
 
 
 
.....
 
  

我该怎么做呢？ 我不认为单独的媒体查询无法解决这个问题。 解决这个问题的有效方法是什么？

Answer 1

如果您与仅CSS的概念结合，您是否考虑使用通过媒体查询控制的两个单独元素？ 我不确定您选择的脚本对速度/加载时间的影响是什么，但这应该从技术角度来看。

HTML

 
 
 
.....
 
.....
 
 
 
.....
 
.....
 
 
 
 
 
.....
 
 
 
.....
 
 
 
.....
 
 
 
.....
 
  

CSS

 #fullscreen { display: block; } #mobileonly { display: none; } @media (max-width: 768px) { #fullscreen { display: none; } #mobileonly { display: block; } } 

如果您已经使用滑块（假设您已经包含了jQuery库），那么您可以从jQuery获得更好的性能。 这种策略可能需要一些速度/负载测试才能找到最佳解决方案。 您可以提供的有关您正在使用的库的更多内容，以及您正在利用滑块的脚本，这些答案可以更具体。