Question

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

目前我正在使用＆＃34; hidden-xs＆＃34;和＆＃34; visible-xs＆＃34;解决问题，但我真的想知道使用这种方法解决问题的最佳做法是什么？

由于做了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>
}

Answer 1

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

alistapart.com/article/responsive-web-design点击此链接，它将帮助您实现您想要的目标。

Answer 2

@media查询是要走的路。

例如..

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

将更改的代码放入其中。这几乎是实现这一目标的最佳方式。您可以在Mozilla Developer Network

找到更多信息

Answer 3

你可以通过

来完成

在识别设备时切换主题知道。

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

3 个答案: