为什么这段代码会让两个div出现在面向风景的iPad上?
/* CSS */
div{
display:none;
}
@media screen and (min-width: 48em) {
/* IPAD PORTRAIT */
body {
/* DARK BLUE */
background-color:#006;
}
div{
display:none;
}
#ipad-portrait{
display:block;
}
}
@media screen and (min-width: 64em) {
/* IPAD LANDSCAPE */
body{
/*bright green*/
background-color:#3f0;
}
/* an attempt to hide all divs before displaying
the one that says iPad landscape */
div{
display:none;
}
#ipad-landscape{
display:block;
}
}
<!-- HTML -->
<div id="ipad-landscape">
ipad landscape
</div>
<div id="ipad-portrait">
ipad portrait
</div>
谢谢!
答案 0 :(得分:3)
你的最小宽度重叠。最小64em宽的设备也至少48em宽。你可能想要的是这样的:
@media screen and (min-width: 48em) and (max-width: 63.999em) {
/* stuff */
}