带有 display:none 和媒体查询的响应式 CSS
Posted
技术标签:
【中文标题】带有 display:none 和媒体查询的响应式 CSS【英文标题】:Responsive CSS with display:none and media queries 【发布时间】:2013-05-18 20:30:51 【问题描述】:我确信这是一个非常基本的问题,所以提前道歉,因为我是新手。
我正在开发一个设计为移动优先的网络应用程序。由于我所有的初始布局都是为小屏幕设计的,因此我引入了手机 jpg 作为<img>
。然后我使用绝对定位将我的画布覆盖在上面。这给了我一个伪手机屏幕,我可以在试验我的设计时使用,而无需不断地用手机进行测试。
我们的想法是使用合适的媒体查询,当遇到较小的屏幕时使用display:block
来防止显示图像。
在很短的时间内我让它工作,但现在我已经破坏了它(没有备份))并且看不到如何!它可以在更宽的桌面屏幕上正常工作。显示图像容器,并且背景画布正确放置在顶部。然而,图像容器也显示在移动设备上(并且由于没有绝对位置),然后我的真实布局显示在 .
html 看起来像这样...
<div id="container">
<img src='phone.jpg' class="desktop-visible"/>
</div>
<div id="backdrop">
Text
</div>
我的 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;
【问题讨论】:
你能设置一个JSFiddle给我们看看吗?如果您复制粘贴您的 CSS 位,您可能会在此过程中发现您的问题。 jsfiddle.net 很好的建议迈克尔,但现在已修复见下文。谢谢。 【参考方案1】:您没有关闭第一个媒体查询。 :-)
// 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;
【讨论】:
谢谢尼尔斯。这解决了它。好消息是我很接近。尴尬的是我错过了右括号。哦! 哈,我都没注意到。尼斯抓到尼尔斯。以上是关于带有 display:none 和媒体查询的响应式 CSS的主要内容,如果未能解决你的问题,请参考以下文章