Разная структура стола для настольного и мобильного зрения

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

Ну, писать свои коды для рабочего стола сначала с заданными атрибутами, и вскоре после этого, начать писать новую версию структуры таблицы с помощью медиа запросов, родительский элемент для всех ваших мобильных связанных 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/

Они создали очень хороший отзывчивый расположение колонок.