Question

我有两个css媒体查询功能，纵向和横向。我想使用javascript修改这些，以便我可以根据传递给页面的变量动态更改这些内部的样式。我知道我可以使用document.styleSheets [x] .rules [x]修改css，但我不知道如何修改特定媒体查询下的样式。

这是我目前的代码：

@media screen and (orientation:portrait) {
    #Header {
        background-color: #000;
        height: 60px;
        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 100;
    }

    #Main .row ul li {
        width: 110px;
        height: 145px;
        padding: 2px;
        margin: 2px 4px 2px 0px;
        vertical-align: middle;
        text-align: center; 
        background-color: #FFF;
        position: relative;
        display:table-cell;
        float:left;
    }

    #Main .row ul li img {
        border: 0;
        width: 86px;
        height: 86px;
        padding: 12;
    }

}

@media screen and (orientation:landscape) {
    #Header {
        background-color: #000;
        height: 45px;
        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 100;
    }

    #Main .row ul li {
        width: 115px;
        height: 110px;
        padding: 2px;
        margin: 2px 4px 2px 0px;
        vertical-align: middle;
        text-align: center;
        background-color: #FFF;
        position: relative;
        display:table-cell;
        float:left;
    }

    #Main .row ul li img {
        border: 0;
        width: 66px;
        height: 66px;
        padding: 8px;
    }
}

我需要在两个方向之间单独更改样式。

这个页面让我了解了如何指定媒体查询的方式，但不是我如何在这些媒体查询中指定媒体功能。 http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets

Answer 1

我没有找到问题的确切答案，但在（我认为）更灵活的方式中找到了实现最终目标的三种不同方式。

第一：完全摆脱CSS媒体功能和媒体查询。而是使用javascript来检测设备方向。然后使用document.styleSheets [0] .cssRules [0]在方向更改时直接更改css;每次改变每种风格。

http://davidwalsh.name/orientation-change http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

第二：是第一个变种。我可以创建两个不同的样式表。一个用于纵向，一个用于横向。然后使用方向检测的Javascript方法，我可以根据需要在样式表之间切换。

http://davidwalsh.name/orientation-change https://www.inetsolution.com/turnleft/post/CSS-Style-Switcher-A-quick-and-dirty-how-to.aspx

第三：在我的情况下，我只需要动态创建一次媒体查询。所以第三个选项是首先使用javascript创建媒体查询。

http://davidwalsh.name/add-rules-stylesheets

有没有办法修改使用javascript使用媒体功能的媒体查询下创建的样式？

1 个答案: