在同一页面中创建2个不同的布局/设计

最近，我创建了一个网页，需要在同一页面中显示桌面和移动设备之间的两种不同格式，例如：在桌面上显示表格，在移动设备上显示卡片视图。在同一页面中创建2个不同的布局/设计

目前我使用“hidden-xs”和“visible-xs”来解决问题，但我真的很想知道使用这种方法解决问题的最佳做法吗？

是否因为做2版网页而造成设计师故障？

<div class="row col-md-12 hidden-xs"> 
<table> 
    <thead> 
     <tr> 
      <th>Image</th> 
      <th>Product Information</th> 
      <th>Qty</th> 
      <th>Weight</th> 
      <th>Price</th> 
     </tr> 
    </thead> 
    <tbody> 
     ... php code get data and loop to row 
    </tbody> 
</table></div> 


<div class="row col-md-12 visible-xs"> 
... php code get data and loop { 
    <div> 
     <div>$data->Image</div> 
     <div>$data->ProductInfo</div> 
     <div>$data->Qty</div> 
     <div>$data->Weight</div> 
     <div>$data->price</div> 
    </div> 
}

来源

2016-09-15 Wilson

创建两个不同的主题，一个用于移动，另一个用于桌面，然后使用媒体查询在这两个主题之间切换。

alistapart.com/article/responsive-web-design按照这个链接它会帮助你实现你想要的。

来源

2016-09-15 04:41:49

嗯，我使用桌面标签的桌面，但在移动我不能使用表标签，因为设计不使用表标签。是否可以使用媒体查询解决？ – Wilson

@威尔逊你有没有尝试过使用响应表可能会工作.. –

它太定制我认为，那些2就像不同的事情。这只是其中一种情况，它不是关于表格，而是布局完全不同。 – Wilson

您可以通过

切换主题时，该设备已被公认知道做到这一点。

来源

2016-09-15 04:28:16 N4Narendran

你是什么意思关于切换主题？ – Wilson

@media queries是要走的路。

例子..

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
}

地点不断变化中的代码。这是实现这一目标的最佳途径。你可以在这里找到更多的信息在Mozilla Developer Network

来源

2016-09-15 04:50:21

我知道媒体查询，我的问题是，这些2使用不同的标签，但表现出同样的事情在桌面-i显示了使用

这些数据，但在移动客户不想要的数据用表格来展示，设计用于移动是使用div作为行并将所有列显示为div。，为什么我创建包含表和可见-xs的div的隐藏xs显示卡视图布局 – Wilson

为了帮助进一步，你可以显示一些代码？这真的会帮助我们帮助你。 –

我编辑我的问题添加一些示例代码。谢谢 – Wilson

在同一页面中创建2个不同的布局/设计

回答

相关问题