Как установить стиль, только если размер экрана меньше высоты экрана?

Question

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

@media (max-width: 320px) and (max-height : 480px) { 
} 
@media (max-width: 360px) and (max-height : 640px) { 
} 
@media (max-width: 768px) and (max-height : 1024px) { 
} 
@media (max-width: 800px) and (max-height : 1280px) { 
} 
@media (max-width: 980px) and (max-height : 1280px) { 
} 

Есть ли более простой способ сделать это или это единственный способ? Спасибо заранее.

Answer 1

Это один из лучших способов, но вы можете попробовать с jquery.

Answer 2

два метода:

1. JavaScript:

if(window.innerHeight > window.innerWidth){ 
    portrait = true; 
}else{ 
    portrait = false; 
} 

2. CSS:

@media screen and (orientation:portrait) { … } 
@media screen and (orientation:landscape) { … } 

Из этих двух в CSS, выбрать в зависимости от того вы хотите в зависимости от height>width или width>height