@media экран для портрета и пейзажа

Question

Я использую отзывчивый шаблон для создания веб-сайта, и я хочу настроить некоторые его части для отображения портретов и пейзажей (например, в iPhone). Поэтому я пишу в CSS

@media screen and (max-width: 320px) {...} 

и после этого

@media screen and (max-width: 480px) {...} 

я проверить мой сайт с emulator, но в обоих случаях второе правило сработавших .. почему? я скучаю?

Answer 1

Да,

Потому что, если ширина составляет 240, например, так:

< 240 = 320, то первая одна срабатывают.

и

< 240 = 480, то второй один срабатывает.

Пожалуйста, используйте min-width в дополнение ко второму :)

Вы также можете использовать встроенный в portrait и landscape:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)