媒体查询:定位方向:横向,不排除台式计算机
Posted
技术标签:
【中文标题】媒体查询:定位方向:横向,不排除台式计算机【英文标题】:Media Queries: Targeting orientation: landscape without excluding desktop computers 【发布时间】:2013-02-17 17:25:12 【问题描述】:我目前正在构建一个响应式页面,但我遇到了问题。 对于更大的屏幕尺寸,我想放大标题等内容。这可行,但在我的 iPhone 上以横向模式测试页面时,标题太大了。
为什么竖屏 iPhone 会触发更大屏幕的媒体查询?好吧,扩大标题的 CSS 规则包含在这个媒体查询中:
@media only screen and (min-width: 30em)
/* 480 pixel */
iPhone 横向屏幕的宽度为 480 像素。所以我试着这样做:
@media only screen and (min-width: 30em) not (orientation: landscape)
/* 480 pixel* /
现在它可以在我的 iPhone 上使用,但我的 MacBook 上的标题不再放大。可能只是某种逻辑错误,但我哪里错了?
【问题讨论】:
only screen and (min-width: 30em) not (orientation: landscape)
根据规范不是有效的媒体查询。奇怪的是它可以在 iPhone 上运行,不过......
【参考方案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
【讨论】:
没有帮助,抱歉。横向媒体查询仍然在我的 MacBook 上触发。我相信这是因为屏幕是“宽屏”,这意味着它的宽度大于高度。 是的,这就是触发它的原因。我会在一分钟内用另一种可能的解决方案更新答案。@media all and (max-device-width:480px) and (orientation:landscape) /*stuff*/
成功了。我会接受你的回答,因为你把我引向了它!
非常感谢。编码愉快!以上是关于媒体查询:定位方向:横向,不排除台式计算机的主要内容,如果未能解决你的问题,请参考以下文章