CSS 智能手机纵向、横向和桌面的媒体查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17443118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
media queries for smartphone portrait, landscape and desktop?
提问by rob.m
I am trying to set different media queries for smartphone orientation and desktop, i want to target portrait and landscape. I am aware of all the other stack links such has:
我正在尝试为智能手机方向和桌面设置不同的媒体查询，我想定位纵向和横向。我知道所有其他堆栈链接，例如：
Media query to target most of smartphone3 media queries for iphone portrait, landscape and ipad portrait
针对大多数智能手机的媒体查询 针对 iPhone 纵向、横向和 iPad 纵向的 3 种媒体查询
But I am still having issues, my landscape one isn't working, this is the code I am using:
但我仍然遇到问题，我的景观无法正常工作，这是我正在使用的代码：
Desktop css first
-- csss for desk --
Portrait:
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
body {
padding: 0 !important;
}
.infoShowWrapper {
width: 268px;
}
.heroImage {
margin-top: 0;
height: 200px;
width: 100%;
background: #fff url(assets/images/hero_small.jpg) no-repeat center center;
}
.navbar-fixed-top {
margin: 0 !important;
}
.box-item {
width: 280px;
}
.seaBkg {
background-image: url(assets/images/mare_2x.jpg);
}
}
Landscape:
@media only screen and (min-device-width: 480px) and (max-device-width: 640px) {
body {
padding: 0 !important;
}
.heroImage {
margin-top: 0;
height: 200px;
width: 100%;
background: #fff url(assets/images/hero_small.jpg) no-repeat center center;
}
.navbar-fixed-top {
margin: 0 !important;
}
.box-item {
width: 440px;
}
.infoShowWrapper {
width: 440px;
}
.seaBkg {
background-image: url(assets/images/mare_2x.jpg);
}
}
The landscape code is like not even getting considered
景观代码甚至没有被考虑
回答by Danield
Try adding
尝试添加
orientation : landscape
@media only screen and (min-device-width: 480px)
and (max-device-width: 640px)
and (orientation: landscape) {
//enter code here
}
See this siteor this snippetfor reference.
