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

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>

                                          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><div class=""><br>

我似乎无法仅在移动视图中显示图像，而不能在桌面视图中显示图像

Answer 1

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

的视口上应用显示 .mobile-hide

虽然与你的案子无关，但我对你的CSS和HTML感到担忧。你不应该使用 !important carelessly。您应该将文本节点包裹在 HTML 标签中，标题应该用标题标签包裹（例如 <h1>）。此外，在您的情况下，最好使用 CSS class 而不是内联样式。

@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="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">
  <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>

Answer 2

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

使用 min-width 显示或隐藏上面一些断点的块。在这个例子我使用 480px。你可以根据你的要求。
使用max-width显示或隐藏断点下方的块。

运行全屏显示代码段并尝试将下面的 window 调整为 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>

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

how to display an element only on mobile view?

html

css

email

eloqua