Написание различных CSS-файлов для разных размеров экрана и мобильных устройств - PullRequest
Новая
       3

Написание различных CSS-файлов для разных размеров экрана и мобильных устройств

2 голосов
/ 28 ноября 2011

Я пытался решить эту проблему весь день и пока не получил ее:

Я хочу получить эти 3 файла CSS:

  • lowerThan960pxForDesktop.css (дляразметка флюида)
  • MobileLandscape.css (iphone 960px, Android 800px и т.1014 * Я хочу, чтобы Lanscape.css использовал desktop.css
  • Я хочу, чтобы Portrait.css использовал оба desktop.css и Landscape.css

как должен выглядеть мой HTML-код, чтобы получить это право - используя медиа-запросы или javascript.Я проходил через это много раз, и каждый раз, когда что-то идет не так (рабочий стол получает mobile.css или iphone читает Portrait.css, даже если он находится в альбомной ориентации и т. Д.).

1 Ответ

1 голос
/ 28 ноября 2011

может быть проблема Iphone связана с известной проблемой ширины области просмотра? решено с добавлением этого в HTML. 

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

Кроме того, используйте медиа-запросы для вызова CSS. и в css-файле вызовите @import для вызова ссылающегося css-файла (например, ландшафт будет @import desktop и т. д.)

медиазапросы 101: 

<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >

и больше информации о богатом мире медиа-запросов здесь .

также рекомендовал использовать условные комментарии IE, чтобы скрыть медиазапросы от старого IE и позволить ему использовать только один вид CSS

edit: ах, теперь я понимаю проблему - вам нужно использовать разные css в разных ситуациях Iphone ... вы можете использовать jquery mobile и связать изменение класса css в соответствии с переходом с портретного на альбомный и обратно.

надеюсь, это поможет

...