Question

我正在尝试创建一个电子邮件，只有在移动设备上查看时才会显示一个图像，而只有在桌面上的桌面上查看时才显示一个图像。

在移动设备上观看时，我已经让桌面图像正确消失，但我不确定如何获得相同的结果。

任何帮助将不胜感激。

我使用的CSS如下：

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

 .img-max {
   width: 100% !important;
   max-width: 100% !important;
   height: auto !important;
 }

 .max-width {
   max-width: 100% !important;
 }

 .mobile-wrapper {
   width: 85% !important;
   max-width: 85% !important;
 }

 .mobile-padding {
   padding-left: 5% !important;
   padding-right: 5% !important;
 }

 /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
 .mobile-hide {
    display: none !important;
 }
 .mobile-show {
    display: block !important;
 }

}

和HTML

<img class="mobile-show" border="0" height="50" src="images/logo.svg" style="display: block;" width="250">
<img class="mobile-hide" border="0" height="50" src="images/logo.svg" style="display: inline;" width="100">

Answer 1

@media screen and (max-width: 600px) {
.mobile-hide {
    display: none !important;
 }
 .mobile-show {
    display: block !important;
 }
}
.mobile-hide {
    display: block;
 }
 .mobile-show {
    display: none;
 }

Answer 2

需要设置第二个媒体屏幕：

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

  /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
 .mobile-hide {
    display: none !important;
 }

}

Answer 3

除移动设备外，您必须始终隐藏移动设备。因此，为您的图像添加display：none。那么你的图像将不会出现在桌面上，而你的CSS与medi将会出现。

<img class="mobileShow" border="0" height="50" src="images/logo.svg" style="display: none;" width="250">

Answer 4

首先为移动deivce支持添加此元标记，如果它缺少如下所示。

@media screen and (max-width: 600px) {
.mobile-hide {
    display: none !important;
 }
 .mobile-show {
    display: block !important;
 }
}
.mobile-hide {
    display: block;
 }
 .mobile-show {
    display: none;
 }

然后使用媒体查询，您可以实现您想要的东西。

Map<ScheduleAbsenceHeaderHistoryTypeEnum, ValueObject> map
    = new TreeMap<>(Comparator.comparing(Enum::name));

Answer 5

＆＃13;

 .desk-hide {
    display: none !important;
 }
 .desk-show {
    display: block !important;
 }

@media screen and (max-width: 600px) {

 .img-max {
   width: 100% !important;
   max-width: 100% !important;
   height: auto !important;
 }

 .max-width {
   max-width: 100% !important;
 }

 .mobile-wrapper {
   width: 85% !important;
   max-width: 85% !important;
 }

 .mobile-padding {
   padding-left: 5% !important;
   padding-right: 5% !important;
 }

 /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
 .mobile-hide {
    display: none !important;
 }
 .mobile-show {
    display: block !important;
 }

}

＆＃13;

<img class="mobile-show desk-hide" border="0" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" style="display: block;">
<img class="mobile-hide desk-show" border="0" src="https://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" style="display: inline;" />

＆＃13;

您已经创建了两个用于处理移动尺寸行为的类。现在，您必须对桌面大小执行相同操作。如果您希望此功能按预期工作，请将桌面大小规则置于@media之上。因此，在默认屏幕大小中，正在应用桌面规则，但是当屏幕变得小于600px时，它将应用@media规则。

Answer 6

您认为平板电脑是移动设备，还是只想要手机？对于今天的手机和平板电脑，信任简单的媒体查询是不可靠的：

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

我认为最好的方法是使用Javascript或PHP（这个PHP类非常有趣github.com/serbanghita/Mobile-detect）来检测正在使用的设备，然后应用正确的样式。

它轻巧，可靠，并为您提供用户所拥有的设备的所有数据，不仅可以了解设备，还可以了解分辨率，像素深度等。甚至为不同的用户提供不同的图像文件。

Answer 7

您可以使用图片标签，该图片标签可以使用许多图像源，例如：

<picture>
    <source srcset="images/logo-mobile.png" media="(max-width: 720px)">
    <img src="images/logo.png">
</picture>

仅在移动设备上显示图像

7 个答案: