桌面与iPad上的单一HTML呈现方式不同

Question

我正在尝试创建一个流畅/响应式布局，其中相同的HTML将在不同的设备上呈现不同的...现在我知道如何使用CSS Media查询（用于桌面/ iPad等），流体网格和所有那东西..

我的问题是，让我们说这是桌面/ iPad的2种布局。我需要使用单个HTML进行设计，并且有2个单独的CSS（通过媒体查询设备宽度等等）。 ..如何编写我的HTML代码，以便CSS能够以不同的方式呈现它？

桌面布局 iPad布局

我已经阅读过许多文章，如上所述; http://www.alistapart.com/articles/responsive-web-design/

但我的问题是，是否可以通过CSS从单个HTML创建极其不同的视图（我的意思是说，在桌面上显示的一组特定的部分/列在不同的设备上处于非常不同的位置）

Answer 1

我上次检查过，您可以在CSS文件中添加media标记，它会自动为您执行此操作。

<link rel="stylesheet" href="" type="text/css" media="Screen" />
<link rel="stylesheet" href="" type="text/css" media="handheld" />

示例

<div id="header"></div>
    <div class="centerSection"></div>
    <div class="centerSection"></div>
    <div class="centerSection">
        <div></div><div></div>
    </div>
<div id="footer"></div>

<强>桌面

.centerSection { float:left; }

移动

.centerSection { clear:both; }

见这里：W3 CSS Media