Question

我想显示我的＆＃34; third_div＆＃34;作为移动设备中的块和桌面上的内联，但我的媒体查询不起作用。我附上了两张图片，展示了我想要实现的目标。我可以解决它吗？ picture one

＆＃13;

ApplicationSettingsBase

＆＃13;

Answer 1

对于媒体查询，我建议采用移动优先方法。因此，将display:block;设置为默认样式，然后仅在窗口等于或大于320px时将其更改为display:inline-block;（添加一些spans以表明它正在运行）：

#third_div {
  display:block;
  width:100%;
  background-color:#363636;
  color:white;
}
.mobile {
  display:block;
}
.desktop {
  display:none;
}

@media only screen and (min-width:320px) {
  #third_div {
    display:inline-block;
    color:red;
  }
  .mobile {
    display:none;
  }
  .desktop {
    display:block;
  }
}

<div id="third_div"><span class="desktop">DESKTOP</div><span class="mobile">MOBILE</div></div>

不确定您是否正在制作电子爆炸或什么，但我建议不要使用内联样式。使用外部CSS更加清晰，易于管理。

Answer 2

使用以下代码：

对于桌面：

#third_div {
    display: inline-block;
}

移动设备：

@media only screen and (min-width:320px) and (max-width:767px) {
    #third_div {
        display: block;
    }
}

或者，替代解决方案

移动

#third_div {
    display: block;
}

桌面

@media only screen and (min-width: 1024px) {
    #third_div {
        display: inline-block;
    }
}

在移动设备上阻止Div显示

2 个答案: