如何仅在移动视图上显示元素？

Question

我在 Eloqua 上创建了一个电子邮件模板，所以我成功地做到了在移动视图上隐藏图像。所以它只显示在桌面视图上。现在我想做的是仅在移动视图上而不是在桌面视图上查看另一个图像。我怎样才能做到这一点？请看一下我的代码@media (max-width: 480px) {.size-controller {  width: 100%;}.mobile-16px-font {  font-size: 16px !important;}.mobile-hide {  display: none !important;}.mobile-show {  }.mobile-100-percent {  width: 100% !important;}}<br> <span style="font-size: 20px; color: #26478D;">April 30 Web event, 4.30-5.00pm</span>                                         <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-hide" hspace="10">                                         <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-show" hspace="10">                                         <br><span style="font-size: 14px; color: rgb(87, 87, 85); border-style: none; padding-right: 10px; padding-bottom: 10px; padding-top: 10px;" class="mobile-16px-font">                                                                        We did have something a bit more elaborate than a web event planned for April, however we’re equally excited to see how we go! We’ll be holding it at 4.30pm (EST) on April the 30th. <br><br>我似乎无法仅在移动视图而非桌面视图上显示图像

Answer 1

您将需要使用@media和max-width的组合min-width。

• 用于显示或隐藏某个断点上方的min-width块。在这个例子中我使用的是. 您可以根据您的要求进行更改。480px

• 用于max-width显示或隐藏断点下方的块。

全屏运行该代码片段并尝试将下面的窗口大小调整为480px，您将看到结果。

@media screen and (max-width: 480px) {

  .show-on-desktop {

    display: none;

  }

}

@media screen and (min-width: 481px) {

  .hide-on-desktop {

    display: none;

  }

}

<div>

   <div class="show-on-desktop hide-on-mobile">

      <h1>This is for desktop</h1>   

      <img src="https://via.placeholder.com/350" alt="" />

   </div>

   

   <div class="show-on-mobile hide-on-desktop">

     <h2>This is for mobile</h2>

     <img src="https://via.placeholder.com/250" alt="" />

   </div>

</div>

Answer 2

您可以添加类似的逻辑来隐藏.mobile-show图像。max-width: 480px您可以使用仅在大于或等于 的视口上min-width: 480px应用显示，而不是使用。.mobile-hide480px

虽然与您的案例无关，但我对您的 CSS 和 HTML 感到担忧。你不应该!important粗心地使用。您应该将文本节点包装在 HTML 标签中，并且标题应该用标题标签包装（例如<h1>）。此外，就您而言，最好使用 CSS 类而不是内联样式。

@media (max-width: 480px) {

  .size-controller {

    width: 100%;

  }

  .mobile-16px-font {

    font-size: 16px !important;

  }

  .mobile-hide {

    display: none;

  }

  .mobile-100-percent {

    width: 100% !important;

  }

}

@media (min-width: 480px) {

  .mobile-hide {

    display: inline;

  }

  .mobile-show {

    display: none;

  }

}

<h1 style="font-size: 20px; color: #26478D;">April 30 Web event, 4.30-5.00pm</h1>

<p>

  <img src="//images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-hide" hspace="10">

  <img src="//images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-show" hspace="10">

  <span style="font-size: 14px; color: rgb(87, 87, 85); border-style: none; padding-right: 10px; padding-bottom: 10px; padding-top: 10px;" class="mobile-16px-font">

                                    

  We did have something a bit more elaborate than a web event planned for April, however we’re equally excited to see how we go! We’ll be holding it at 4.30pm (EST) on April the 30th.<br>

  Tune in to hear more about how Experian has adjusted their way of doing business over the last couple of months, the latest features available in Aperture 2.0 and hear directly from a couple of our Advocates on how they have benefited from the Advocate program, and how they have adapted to the new norm.<br><br>

  We’ll run the event via a Webex, all you will need to do is grab a drink and click this link a few minutes before the time;   <a href="https://oneexperian.webex.com/oneexperian/onstage/g.php?MTID=e3f8dd6ff4b183fc082b93cab47892e3f&elqTrackId=dde80b180c2f4e0d9ea2b393afa99c17&elqTrack=true" align="center" data-targettype="link" title="Link">Webex event – 30 April at 4.30pm</a></span>

</p>