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

我正在尝试创建一个流畅的/响应性强的布局，在不同的设备上，相同的HTML呈现方式会有所不同……现在我知道了如何使用CSS媒体查询（用于桌面/iPad等）、流畅的网格以及所有这些东西

我的问题是，假设这是我为桌面/iPad设计的两个布局。我需要使用一个HTML进行设计，并有两个单独的CSS（这将通过媒体查询设备宽度等进行使用）。我如何编写HTML，以便CSS能够以不同的方式呈现它

桌面布局 iPad布局

我已经读了很多文章，比如《论》上的那篇；

---

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

上次我检查时，您可以在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 { clear:both; }

---

请参见此处：

我知道添加了媒体查询。我的问题是，我计划如何对html和css进行编码，使其呈现不同的效果？您可以只为桌面编写html和css，然后为移动版本编写css文件。这没有什么不同，只要您在创建网站/css文件时遵循良好的惯例即可。使用第二个CSS文件，您可以简单地更改布局并隐藏移动版本上不必要的部分。我想有一件事需要记住，那就是要知道两个版本上肯定会有什么。（这样你可以隐藏某些你不需要的

）隐藏桌面对ipad的div将是很容易的一部分。我不知道如何对桌面对ipad上不同位置出现的中间a和中间b部分进行编码。而不是使用中间a和中间b

float:left，您将有
清除：两个能否请你为html和css添加一个粗略的代码，以便我能更好地理解。。
.centerSection { clear:both; }