媒体查询应用于人像和景观

Question

我目前正在建立一个包含RWD功能的小型网站，以使其在移动设备上正常运行。

我的媒体查询似乎在纵向模式下正常工作。但是，当我旋转设备时，规则似乎不再适用。

人像模式（320x480）

使用代码：

@media only screen and (min-width: 320px) and (max-width: 480px)

相同的媒体查询在

中呈现此内容

横向模式（480x320）

正如您可能知道的那样，我的媒体查询会根据屏幕的宽度调整字体大小。奇怪的是，即使媒体查询也适用于横向视图中的字体也不会改变。

媒体查询的完整代码：

/*................................
MEDIA QUERIES - Phones
..................................*/

@media only screen and (min-width: 320px) and (max-width: 480px)    {

/*............................
FONTS
..............................*/

html    {
    font-size: 70%;

}

p.promo {
    line-height: 1.4em;
}

}

/*..............................
LAYOUT
................................*/

.clientLogo {
    float: left;
    height: 60px;
    width: 60px;
    margin: 10px 10px 10px 30px;
    background: $moondust;
}

/* Phones - Landscape */

/*................................
MEDIA QUERIES - Tablets
..................................*/

@media only screen and (min-width: 481px) and (max-width: 768px)    {

/*............................
FONTS
..............................*/

html    {
    font-size: 85%;
}

p.promo {
    line-height: 1.5em;
}

/*.............................
LAYOUT
...............................*/

.clientLogo {
    float: left;
    height: 80px;
    width: 80px;
    margin: 10px 30px 10px 30px;
    background: $moondust;

}

}

/*................................
MEDIA QUERIES - Desktops
..................................*/

@media only screen and (min-width: 769px)   {

/*............................
FONTS
..............................*/

html    {
    font-size: 100%;
}


/*...............................
LAYOUT
.................................*/

.clientLogo {
    float: left;
    height: 120px;
    width: 120px;
    margin: 10px 30px 10px 30px;
    background: $moondust;

}

}

Answer 1

你试过这个吗？

scheduleNotification()