Блог

Я осмотрелся, но мне нужен более краткий ответ на этот вопрос.

Я пытаюсь разработать наилучший способ построения CSS в моем текущем проекте для нескольких мультимедийных устройств. Я хочу иметь таблицу стилей для:

1. Сброс CSS (все для использования)
2. Обычный «экран» рабочего стола. (только для настольных компьютеров)
3. Печать ‘print’ (только печать)
4. iPhone / карманный (только карманный)
5. Таблица стилей IE6 (только IE6)

Итак, мой вопрос: прав ли я, думая, что правильным способом управления этим было бы..

• установите media=»all» для сброса.css
• установите media=»экран» для рабочего стола.css
• используйте условные комментарии «здесь» для устаревших браузеров.
• установите media=»print» для печати.css
• используйте мультимедийные запросы css3, такие как: @экран только для мультимедиа и (минимальная ширина устройства: 320 пикселей) и (максимальная ширина устройства: 480 пикселей){ }

у кого-нибудь есть немного больше опыта настройки CSS для нескольких устройств, которые могли бы использовать свои методы? как вы сами это организуете?

Это может зависеть от нескольких факторов, не последним из которых является то, как продвигается ваш дизайн. Это отличная статья о разработке с мобильных устройств:

http://stuffandnonsense.co.uk/projects/320andup/

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

И, чтобы увидеть, как различные медиа-запросы реагируют на изменение размера или ориентации, попробуйте демонстрацию на этой странице:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

Вы можете настроить атрибуты медиа-запроса, чтобы получить представление о том, как они влияют на страницу.