html – 移动和桌面响应式标记

2019年7月27日 182次阅读

我正在开发一个网站,我正在使用bootstrap框架.我希望网站能够响应大多数的divices.问题是移动标记与桌面标记有所不同,不是所有标记,而是一些块.我该怎么办？根据设备重新放置信息并显示和隐藏？什么是最佳做法？

提前致谢！

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

<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中,我不知道这是正确的.

最佳答案 我不会有重复的元素做同样的事情 – 只是为每个元素分配不同的类,并在屏幕大小上以不同的方式显示它们.请记住,有些课程不会出现在较小的屏幕尺寸上 – 例如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;
}
}
点赞