Отдельный рендеринг HTML по-разному на настольных ПК и iPad

Question

Я пытаюсь создать гибкий / адаптивный макет, в котором один и тот же HTML-код будет отображаться по-разному на разных устройствах ... Теперь я знаю, как использовать CSS Media запросы (для настольных ПК / iPad и т. Д.), Жидкие сетки и всеэтот материал ..

Мой вопрос, скажем, это 2 макета, которые у меня есть для настольных ПК / iPad .. Мне нужно спроектировать с использованием одного HTML и иметь 2 отдельных CSS (что было бы принято через медиа-запросширина устройства и т. д.) ... Как мне кодировать мой HTML, чтобы CSS мог отображать его по-другому?

Макет рабочего стола Макет iPad

Я уже просмотрел много статей, подобных той, что была о;http://www.alistapart.com/articles/responsive-web-design/

Но мой вопрос заключается в том, возможно ли создавать совершенно разные представления из одного HTML-кода только через CSS (под этим подразумевается, что определенный набор разделов / столбцов, отображаемых на рабочем столе, сильно отличаетсяположение для другого устройства)

Answer 1

В последний раз я проверял, вы можете добавить тег media в файл CSS, и он автоматически сделает это за вас.

<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>

Desktop

.centerSection { float:left; }

Мобильный телефон

.centerSection { clear:both; }

См. Здесь: W3 CSS Media