html - 在移动设备上显示 block Div

Question

我想在移动设备中将我的“third_div”显示为一个 block 并在桌面设备上以内联方式显示，但我的媒体查询不起作用。我附上了两张图片，展示了我想要实现的目标。我该如何解决？。 picture one

picture two

<h2 style="text-align: center;font-size: 25px;font-family: Arial, Helvetica, sans-serif;line-height: 1.3;
margin-bottom: 18px;
font-weight: 400;"><strong>Premium Transportation Servicing The Dominican Republic</strong></h2>
<p style="text-align: center;">Transekur is the only company in the Dominican Republic dedicated exclusively to providing premium transportation and airport transfers in private, luxurious vehicles. No matter how big or small your vacation party, we have the transportation to fit your needs.</p>
&nbsp;
<div style="width: 100%; background-color: white; border: 1px solid grey; height:100%;">
<div id="first_div" style="width: 100%; background-color: #ca7a09;">
<h2 style="text-align: center; color: white; padding-top: 5%;font-size: 36px;">The benefits of using Transekur</h2>
<div style="display: flex; display: -webkit-flex; overflow: auto;">
<div class="first_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto; padding-top: 12%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/wifi.png" />
<h3 style="text-align: center; color: white;padding-top: 3%;padding-left:2%;">FREE Wi-Fi service</h3>
<p style="text-align: center; color: white;padding-top: 15%;padding-left:2%;">All of our modern luxury vehicles come equipped with mobile hotspot Wi-Fi service, so that you always have internet on the go.
</p>

</div>
<div class="second_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/phone-1.png" />
<h3 style="text-align: center; color: white; padding-top: 16%;">FREE Phone Service</h3>
<p style="text-align: center; color: white;padding-left:2%;padding-top: 1%;">A mobile phone with unlimited calls within the Dominican Republic, the United States, Puerto Rico and Canada is provided free of charge for our clients during the rental period</p>

</div>
<div class="thirdt_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto;padding-top: 15%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/car-1.png" />
<h3 style="text-align: center; color: white; padding-top: 1%;">New Vehicles</h3>
<p style="text-align: center; color: white; padding-top: 15%;padding-left:2%;"> Transekur Premium Transport’s fleet of modern luxury SUV’s and limo buses come with leather interior, tinted windows, WiFi service, and cold beverages. These come standard in all of our vehicles.</p>

</div>
<div class="fourth_image" style="width: 25%;">

<img style="display: block; margin-left: auto; margin-right: auto; padding-top: 5%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/driver.png" />
<h3 style="text-align: center; color: white; padding-top: 11%;">Bilingual Drivers</h3>
<p style="text-align: center; color: white; padding-top: 13%;padding-right:5%">We are excellent communicators. If English is not your primary language, our drivers also speak French, German, Italian, Portuguese, and Spanish.</p>

</div>
</div>
<!-- End of the first iner div flex div -->

</div>
<!-- End of the first div -->
<div id="second_div" style="width: 100%; background-color: white; display: flex; display: -webkit-flex;height:100%;">
<div style="width: 50%;">
<p style="text-align: center;">Visited October 2016</p>
<img style="display: block; margin-left: auto; margin-right: auto; border-radius: 50%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/avatar030-1.jpg" />
<h2 style="text-align: center; color: gray;">Yezabel D</h2>
</div>
<div style="width: 50%;">
<a href="https://www.tripadvisor.com/ShowUserReviews-g147289-d10263324-r425689594-Transekur-Santo_Domingo_Santo_Domingo_Province_Dominican_Republic.html#CHECK_RATES_CONT" style="text-align: center; color: gray; margin-left: auto; margin-right: auto; padding-right: 10%;font-size:20px;color:#ca7a09;"  target="_blank">"The best service there is, at a price you can’t resist."</a>
<p style="margin-left: auto; margin-right: auto; padding-right: 10%;">I want to let you know how much my husband and I enjoyed our trips with Transekur. We used your service for trips to the Punta Cana airport. Very nice. Both of your drivers were on time and very courteous. We had used other services when we traveled to the Dominican before, needless to say yours is superior. Thank you for a trouble free ride to and from the airport, we will highly recommend your service to family and friends!</p>

</div>
</div>
<!-- End of the second first div -->
<div id="third_div" style="width: 100%; background-color: #363636;display:inline-block">
 <style>@media only screen 
 and (min-device-width: 320px) {
  #third_div{
   display:block;
   }
 }</style>
<img src="http://transekur.seobrandserver.com/wp-content/uploads/2016/03/logo_transekur.png"/>
<h2 style="color:white;padding-left:50%;padding-top:2%;">Book Transport With Us Today!<h2>
<p><a href="tel:18888858708">1-888-885-8708</a></p>
<p><img src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/testgif.gif" style="width: 48px;
height:24px;" /></p>

</div>
</div>

Answer 1

对于媒体查询，我建议采用移动设备优先的方法。所以设置display:block;作为默认样式，然后仅将其更改为 display:inline-block;一旦窗口等于或大于 320px(添加了一些 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 更加简洁且易于管理。