CSS framework без Javascript

Question

Мне нужно создать сайт, но у меня есть конкретные инструкции, чтобы не использовать javascript. В дополнение к этому я также должен сделать тот, который работает для iPhone/мобильных устройств (также нет javascript). Для меня отлично, чтобы переключить таблицу стилей на устройства с помощью некоторой магии PHP, поэтому это не должен быть тот же файл CSS.

Что я хочу знать, каковы рекомендуемые рамки CSS для обоих или обоих сценариев?

Answer 1

Чтобы достичь этого, вы должны использовать медиа-запросы.

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Основная идея заключается в том, чтобы разработать с мобильного телефона вверх, или «отзывчивым» дизайн. Вы должны искать в Google, чтобы узнать больше.

Вы затем использовать такие операторы, как

@media only screen and (max-width: 480px){ 
    #content{ 
     display:block; 
    } 
} 

, например, чтобы определить, как определенные изменения элементов для каждого вида. Существует множество ресурсов для этого, которые можно найти при базовых поисковых запросах, поэтому здесь необходимо подробно описать это.

Вы можете также добавить в специальных таблицах стилей следующим образом:

<link rel="stylesheet" media="all and (max-width: 480px)" href="http://foo.bar.com/stylesheet.css" /> 

, если вы хотите, чтобы отделить таблицы стилей для каждого вида.

удачи.

Если у вас есть конкретные вопросы, не стесняйтесь спрашивать, и я могу обновить.

Answer 2

Как указано Kai Qing, медиа-запросы - это все, что вам нужно для заполнения указанных вами критериев.

Если вы хотите использовать фреймворк CSS, чтобы облегчить вам задачу, вы можете использовать Bootstrap, Foundation или любую другую инфраструктуру, без части JavaScript.

Here демо-версия, как вы могли бы реализовать responsive design с Cascade Framework. Демо не использует код JavaScript и возвращается к настольной версии для IE6 в IE8 (так как эти браузеры не поддерживают медиа-запросы).