Question

我是这个领域的新手。有人可以帮忙解决这个问题。现在，我需要一个包含桌面和移动视图的页面。在这个页面上，我需要一个表格显示。

在桌面视图中，它会正常显示。

    th1     th2     th3
    td1-1   td1-2   td1-3
    td2-1   td2-2   td3-3

但是当切换到移动视图时，我需要使用不同结构的表：桌面位于左侧，桌面内容位于右侧。

    th1  td1-1
    th2  td1-2
    th3  td1-3
    th1  td2-1
    th2  td2-2
    th3  td2-3

抱歉，我没有足够的声誉发布图片......

有人可以帮忙吗？

Answer 1

好吧，首先使用指定的属性编写桌面代码，然后不久，使用媒体查询开始编写新版本的表格结构，这是与您的所有移动设备相关的主要元素< strong> GUI 是以下语法;在那里写下所有与手机相关的代码;

@media all and (max-width: 658px) {

 // Your Codes For Mobile

}

期待更熟悉媒体查询？然后阅读本文;

Media Queries

Answer 2

您可以使用媒体查询来确定以不同屏幕尺寸显示的布局。这个想法是，当屏幕适合500px或更低时，在移动模式下显示表，否则，以桌面模式显示。

以下是示例代码：

CSS

/*normal mode*/
#desk-table {
    display: block;
}
#phone-table {
    display: none;
}

/*mobile mode*/
@media only screen and (max-width: 500px) { // max-width is the size of the web broswer in mobile 
    #desk-table {
        display: none;
    }
    #phone-table {
        display: block;
    }
}

HTML

<table id="desk-table">
<tr>
    <td>th-1</td>
    <td>th-2</td>
    <td>th-3</td>
</tr>
<tr>
    <td>td1-1</td>
    <td>td2-1</td>
    <td>td3-1</td>
</tr>
<tr>
    <td>td1-2</td>
    <td>td2-2</td>
    <td>td3-2</td>
</tr>

<table id="phone-table">
<tr>
    <td>th-1</td>
    <td>td1-1</td>
</tr>
<tr>
    <td>td2-1</td>
    <td>td2-1</td>
</tr>
<tr>
    <td>th-3</td>
    <td>td3-1</td>
</tr>
    <tr>
    <td>th-1</td>
    <td>td1-2</td>
</tr>
<tr>
    <td>td2-1</td>
    <td>td2-2</td>
</tr>
<tr>
    <td>th-3</td>
    <td>td3-2</td>
</tr>

您应该使用一些响应式Framekwork，例如：

Boostrap：http://getbootstrap.com/
基金会：http://foundation.zurb.com/

他们创建了非常好的响应列布局。

桌面和移动视图的不同表结构

2 个答案: