媒体查询：定位方向：景观不包括台式电脑

Question

我正在构建一个响应页面，但我有一个问题。
对于更大的屏幕尺寸，我想放大像标题一样的东西。这可行，但在横向模式下测试我的iPhone上的页面，标题太大。

为什么iPhone纵向触发大屏幕媒体查询？那么，放大标题的CSS规则将包含在此媒体查询中：

@media only screen and (min-width: 30em) { 
    /* 480 pixel */ 
} 

并且横屏中的iPhone屏幕宽度为480px。所以我试图这样做：

@media only screen and (min-width: 30em) not (orientation: landscape) { 
     /* 480 pixel*/
} 

现在它适用于我的iPhone，但标题不会在我的MacBook上放大。可能这只是某种逻辑错误，但我错在哪里？

Answer 1

尝试用and (orientation:portrait)代替not (orientation:landscape)。如果失败，请尝试将em值更改为px值。有些浏览器与em不搭配，所以值得一试。

编辑：为什么不把它分解成单独的样式？

@media all and (min-width:480px) and (orientation:landscape) { 
    // styles for desktops, mouse-friendly interface 
} 

@media all and (min-width:480px) and (orientation:portrait) { 
    // styles for mobiles, touch-friendly interface 
}