媒体查询:目标定位:不排除台式计算机的横向

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
}