我确信这是一个非常基本的问题,所以提前道歉,因为我是新手。
我正在开发一款以移动设备为先的网络应用程序。由于我所有的初始布局都是为小屏幕设计的,所以我引入了手机 jpg 作为 <img>
。 .然后我使用绝对定位将我的 Canvas 覆盖到它上面。这为我提供了一个伪移动屏幕,我可以在试验我的设计时使用,而无需不断地用手机进行测试。
想法是然后使用合适的媒体查询,当遇到较小的屏幕时使用 display:block
以防止显示图像。
有很短的时间我让它工作,但现在我把它弄坏了(没有备份))并且看不出如何!它在更宽的桌面屏幕上运行良好。显示图像容器并且背景 Canvas 正确放置在顶部。然而,图像容器也显示在移动设备上(并且没有绝对位置),然后我的真实布局显示在 .
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;
}
}
最佳答案
您没有关闭第一个媒体查询。 :-)
// 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;
}
}
关于css - 响应式 CSS 显示 :none and media queries,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16714636/