使用媒体查询在移动设备上显示两个 div，但在桌面上隐藏一个

Question

在我的项目中，我有两个 div（即 #div1、#div2）。我想在移动设备上显示两个 div，在桌面设备上只显示 #div1。

@media screen and (max-width: 600px) {
        #div1 {
            display: none;
        }
}

在这种情况下，作为桌面显示 - #div1,#div2 和移动显示 #div2。

但我希望桌面显示 #div1，移动显示 #div1,#div2

如何为此编写@media-query。看不懂。

Answer 1

/* mobile first */

.div1, .div2 {
  padding: 20px;
  margin-bottom: 10px;
}

.div1 {
  background-color: pink;
}

.div2 {
  background-color: tan;
}


@media screen and (min-width: 600px) {
  .div1{
    display: none;
  }
}

<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>

你只是把媒体查询中的最小值换成了最大值。

使用媒体查询在移动设备上显示两个 div，但在桌面上隐藏一个

Display two divs on mobile devices, but hide one on desktop, using media query

html

css

media-queries