用于隐藏和显示页面元素的 CSS 媒体查询。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19390690/
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
CSS media queries to hide and show page elements .
提问by Ace
I'm kind of new to coding with media queries, and I think I have painted myself into a corner, using too many media queries (and probably in the wrong way).
我对使用媒体查询编码有点陌生，我想我已经把自己逼到了角落，使用了太多的媒体查询（并且可能以错误的方式）。
What I want to do is to hide some page elements when the width of the screen or device is smaller than 481px. So in the screenshot below, you might be able to see the couple of lines of text in the upper right corner.
我想要做的是当屏幕或设备的宽度小于481px时隐藏一些页面元素。因此，在下面的屏幕截图中，您可能会在右上角看到几行文本。
My problem has to do with the media queries that I've used. I am at wit's end to figure out (1) why the page elements (those two lines of text in the upper right corner) are not disappearing when the page gets smaller than 481px OR (2) why they do not appear in any larger screen/device sizes when I do manage to get the page elements to disappear.
我的问题与我使用过的媒体查询有关。我想弄清楚 (1) 为什么当页面小于 481px 时页面元素（右上角的那两行文本）没有消失或 (2) 为什么它们没有出现在任何更大的屏幕上/device 大小，当我设法让页面元素消失时。
Here is the piece of CSS code that seems to cause some issues:
这是一段似乎引起一些问题的 CSS 代码：
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px){
/* Hiding elements for this device * * * * * * * * * * * * * */
/*
.poweredBy{
display: none;
}
*/
}
With this code commented out, those two lines of text won't disappear until the window (device?) width is somewhere around 320px.
注释掉这段代码后，这两行文本不会消失，直到窗口（设备？）宽度达到 320 像素左右。
Here is the entire CSS:
这是整个CSS：
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.poweredBy{
display: none;
}
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px){
.poweredBy{
display: none;
}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
.poweredBy{
display: none;
}
}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
/* iPad 3 ---------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {}
/* 960px layouts ----------- */
@media only screen and (min-width : 960px){}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {}
I am using GroundworkCSS underneath, but I have added a few media queries myself -- that was most likely not an enlightened act on my behalf. So if anyone could point me in the right direction, I would be most grateful. Thanks.
我在下面使用 GroundworkCSS，但我自己添加了一些媒体查询——这很可能不是代表我的开明行为。因此，如果有人能指出我正确的方向，我将不胜感激。谢谢。
回答by Mitchell Layzell
You have way to many media queries, the most you should have is three one for tablet, tablet landscape and mobile. Typically like this,
你有很多媒体查询的方法，你应该拥有的最多的是平板电脑、平板电脑横向和移动设备的三一。通常像这样，
CSS
CSS
/** Mobile **/
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
}
/** Tablet **/
@media only screen and (min-width : 768px) and (max-width : 1024px) {
}
/** Tablet (landscape) **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
回答by kampageddon
The css code for portrait and landscape:
纵向和横向的 css 代码：
@media screen and (orientation:portrait) {
/* Style for portrait mode goes here */
}
@media screen and (orientation:landscape) {
/* Style for landscape mode goes here */
}
Or, as written by Mitch Layzell, you can use this:
或者，正如 Mitch Layzell 所写，你可以使用这个：
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
/** Mobile **/
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {
}
/** Tablet (landscape) **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/** Tablet **/
}
If you want you can insert "(orientation : landscape)" and "max-width" or "max-width-device" together.
如果需要，您可以一起插入“（方向：横向）”和“最大宽度”或“最大宽度设备”。
