在 javascript 中切换方向变化的类

Question

element我们如何根据设备的方向切换类别。

例子：

<div class="landscape"></div>

@media (orientation: portrait) {
.landscape: {...}
}

我可以改变landscapeCSS属性。但我想避免这种情况。

相反，我想改变类本身，它看起来像

<div class="portrait"></div> // if orientation is portrait
<div class="landscape"></div> // if orientation is landscape

对此有何建议！

vue注意：也接受答案

更新：screen.orientation不适用于safari. 解决方案也应该有效safari。

感谢您的精彩回答。

Answer 1

使用 来查看此代码matchMedia。但也许我在这段代码中的某个地方犯了错误。但本质和结构是正确的。

window.matchMedia('(orientation: portrait)').addListener(function(m) {
       let div_class = document.querySelector('.landscape');
       if (m.matches) {
                div_class.className = 'portrait';
            } else {
                div_class.className = 'landscape';
            }
    });