CSS Media Query для печати, мобильных и настольных ПК - PullRequest
Новая
       6

CSS Media Query для печати, мобильных и настольных ПК

1 голос
/ 20 апреля 2011

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

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

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

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

  • установить media = "all" для resets.css
  • установить media = "screen" для desktop.css
  • использовать условные комментарии "здесь" для устаревших браузеров.
  • установить media = "print" для printing.css
  • использовать медиазапросы css3, такие как: @media only screen и (min-device-width: 320px) и (max-device-width: 480px) {}

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

1 Ответ

2 голосов
/ 20 апреля 2011

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

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

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

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

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

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

...