Привет, пытаюсь понять min-width/max-width & orientation: portrait/landscape для мобилных.

Когда тестирую, то работает:

  @media screen and  (max-width: 420px) and (orientation:landscape) {
      /*css for landscape*/
  }
  @media screen and  (max-width: 320px) and (orientation:portrait) {
      /*css for portrait*/
  }

Когда тестирую, то работает:

  @media screen and  (max-width: 420px) {
      /*css for landscape*/
  }
  @media screen and  (min-width: 320px) {
      /*css for portrait*/
  }

А этот вариант не работает:

  @media screen and  (max-width: 420px) {
      /*css for landscape*/
  }
  @media screen and  (min-width: 320px) {
      /*css for portrait*/
  }

Подскажите, как лучше всего использовать min-width и min-width?
и есть ли зависимость между min-/max width и orientation?

Оценить:|
  
Комментировать
Раздел: Помощь    
Просмотров: 2450
Комментариев (3)
  1. Greg
    Григорий Кочнев [Greg]
    10.02.2012 в 12:39

    Что-то у вас код одинаковый для примера, что работает и нет :)
    В последней работе мы использовали только такое(айпад):

    @media screen and (max-device-width: 1024px)

    т.е. максимальная ширина разрешения девайса 1024, с ориентацией не замарачивались.

    >и есть ли зависимость между min-/max width и orientation?
    Тут надо в самом деле тестировать и пробовать.
    Если разберетесь, напишите плиз топик на эту тему, самому интересно!

  2. annagk
    10.02.2012 в 15:14

    Я сейчас исключительно iPhone для тестирую, так что не учитываю 1024.

    Хочу действительно поправить — в 3ем примере имела в виду max-width для 320 (по идее должен работать… но не хочет =)

      @media screen and  (max-width: 420px) {
          /*css for landscape*/
      }
    
      @media screen and  (max-width: 320px) {
          /*css for portrait*/
      }

Оставить комментарий