带有 display:none 和媒体查询的响应式 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16714636/
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
Responsive CSS with display:none and media queries
提问by Peter Gross
I'm sure this is quite a basic question, so apologies in advance as I am new to this.
我确定这是一个非常基本的问题，所以提前道歉，因为我是新手。
I am working on a web app that is designed to be mobile first. As all my initial layouts are designed for small screens I have introduced a mobile phone jpg as an <img>. Then I have overlaid my canvas onto this using absolute positioning. This gives me a pseudo mobile screen I can use whilst experimenting with my design without having to constantly test with the handset.
我正在开发一个设计为移动优先的网络应用程序。由于我所有的初始布局都是为小屏幕设计的，因此我引入了手机 jpg 作为<img>. 然后我使用绝对定位将我的画布覆盖在这个上面。这给了我一个伪移动屏幕，我可以在试验我的设计时使用它，而不必经常用手机进行测试。
The idea is to then use suitable media queries to which when encountering smaller screens use display:blockto prevent the image being displayed.
这个想法是然后使用合适的媒体查询，当遇到较小的屏幕时，可以使用它display:block来防止显示图像。
For a short time I had it working, but now I've broken it (with no backup)) and can't see how! It works alright on the wider desktop screens. The image container is displayed and the backdrop canvas is correctly laid over the top. However the image container is also being displayed on mobile devices (and as there is no absolute position) my real layout is then displayed after the .
有一段时间我让它工作，但现在我已经打破了它（没有备份））并且看不到如何！它在更宽的桌面屏幕上运行正常。显示图像容器并且背景画布正确放置在顶部。然而，图像容器也在移动设备上显示（并且由于没有绝对位置）我的真实布局然后显示在 .
The HTML looks like this ...
HTML看起来像这样......
<div id="container">
<img src='phone.jpg' class="desktop-visible"/>
</div>
<div id="backdrop">
Text
</div>
My CSS is currently this ...
我的 CSS 目前是这样的......
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
@media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
// Portrait tablets and landscape mobiles
@media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
@media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
回答by Nils Kaspersson
You're not closing the first media query. :-)
您没有关闭第一个媒体查询。:-)
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
@media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
} // you missed this one
// Portrait tablets and landscape mobiles
@media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
@media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
