как отобразить элемент только в мобильном представлении?

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

Вы можете добавить аналогичные логи c, чтобы скрыть изображение .mobile-show. Вместо использования max-width: 480px вы можете использовать min-width: 480px, чтобы применить показ .mobile-hide только к области просмотра, большей или равной 480px.

Хотя это не относится к вашему делу, у меня есть опасения по поводу вашего 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="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, чтобы показать или скрыть блок ниже вашей точки останова.

запустить фрагмент на весь экран и попробуйте изменить размер окна ниже до 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>