html - 单个 HTML 在桌面和 iPad 上呈现不同

Question

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

我的问题是假设这些是我为桌面/iPad 使用的 2 种布局。我需要使用单个 HTML 进行设计并有 2 个单独的 CSS(这将通过媒体查询设备宽度等进行处理)。 ..我如何编写我的 HTML 以使 CSS 能够以不同的方式呈现它？

桌面布局 iPad 布局

我已经阅读了很多文章，比如上一篇； http://www.alistapart.com/articles/responsive-web-design/

但我的问题是是否可以通过 CSS 从单个 HTML 创建截然不同的 View (我的意思是说桌面上显示的一组特定部分/列对于不同的设备处于非常不同的位置)

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