在桌面与 iPad 上以不同方式呈现单个 HTML答案

【问题标题】：Single HTML rendering differently on desktop Vs iPad在桌面与 iPad 上以不同方式呈现单个 HTML
【发布时间】：2011-10-06 16:46:15
【问题描述】：

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

我的问题是假设这些是我为台式机/iPad 提供的 2 种布局。我需要使用单个 HTML 进行设计并具有 2 个单独的 CSS（这将通过媒体查询设备宽度等来实现）。 ..我如何编码我的 HTML 以便 CSS 能够以不同的方式呈现它？

桌面布局 iPad 布局

我已经浏览过很多类似上一篇的文章； http://www.alistapart.com/articles/responsive-web-design/

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

【问题讨论】：

标签： html ipad css

【解决方案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

【讨论】：

我知道添加媒体查询..我的问题是我打算如何编码 html 和 css 以不同地呈现？
好吧，你可以为桌面编写 HTML 和 CSS，然后为移动版本编写 CSS 文件。没有太大的不同，只要您在创建网站/css 文件时遵循良好的惯例。使用第二个 CSS 文件，您可以简单地更改布局并隐藏移动版本上不需要的任何部分。我想要记住的一件事是知道两个版本肯定会出现什么。（这样你可以隐藏某些你不需要的<div>。）
隐藏桌面与 ipad 的 div 将是简单的部分..我不知道如何编码出现在桌面与 ipad 差异位置的中心 a 和中心 b 部分..
而不是中心 a 和中心 b float:left;，您将拥有 clear:both;
能否请您为 html 和 css 添加一个粗略的代码，以便我更好地理解..