iphone - 媒体查询：定位方向：横向，不排除台式计算机

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

尝试替换not (orientation:landscape)为and (orientation:portrait). 如果失败，请尝试将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
}