如何只在使用媒体查询的移动视图中显示图片？ [英] How to display image ONLY in mobile view using media queries?

问题描述

有人可以帮我修改以下代码，以便只在移动视图中显示图片。现在，它总是可见的。

 < style type =text / javascript 
 .icon-xyz 
 {float：left; width：22px; cursor：pointer; background：none;} 
 
 @media only screen and（max-device-width：568px）and（min-device-width：320px）and ）
 {.icon-xyz {float：left; width：22px; background：none; cursor：pointer; padding：0 13px！important;}} 
 
& 
  

以下是添加图片的脚本：

  $（document）.ready（function（）{
 var loc = window.location; 
 if（loc.toString（）.UploadCase （'/ home /'）> -1）
 {
 $（＃icon-xyz）。css（background，url（/images/Icon1.png）no-repeat ）; 
 if（$。cookie（lang）==es）
 {
 $（＃icon-xyz）。css（background，url （/images/Icon2.png）no-repeat）; 
} 
} 
}）; 
  

https://jsfiddle.net/ad8bc8tv/1/

解决方案

code> max-device-width 和 min-device-width ，您将无法在桌面上测试此媒体查询浏览器，因为它只会在符合这些参数的设备上执行。

这可能是其中一个原因。 >

要在桌面环境中进行测试，请尝试使用 max-width 和 min-width ，因为这些与浏览器窗口的大小而不是设备的屏幕大小有关。

事实上，Google用他们的话说，由于与旧版浏览器报告和适应性相关的原因，强烈不鼓励 使用 * - device-width https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-CNrel =nofollow noreferrer>更多详情）。

根据您的问题：

如何在行动版使用媒体查询？

这里有一个使用CSS的方法：

div class =snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =false>

  .icon-xyz {display：none;} @ media only screen and（min-width：320px）and（max-width：568px）and （orientation：portrait）{.icon-xyz {display：inline; }}  

 < img class =icon-xyz src =http://i.imgur.com/60PVLis.pngwidth =100height =100alt =>  

jsFiddle

Can somebody help me modify the below code to display image only in mobile view. Right now, it is always visible.

<style type="text/javascript">
      .icon-xyz
      {float: left; width: 22px;cursor: pointer;background: none;}

      @media only screen and (max-device-width: 568px) and (min-device-width: 320px) and (orientation: portrait)
     {.icon-xyz {float: left;width: 22px;background: none;cursor: pointer;padding: 0 13px !important;}}

</style>

Following is the script to add image :

$(document).ready(function() {
      var loc = window.location;
      if (loc.toString().toUpperCase().indexOf('/home/') > -1)
      {
      $("#icon-xyz").css("background", "url(/images/Icon1.png) no-repeat");
      if($.cookie("lang") == "es")
      {
      $("#icon-xyz").css("background", "url(/images/Icon2.png) no-repeat");
      }
      }
});

https://jsfiddle.net/ad8bc8tv/1/

解决方案

Since you're using max-device-width and min-device-width you won't be able to test this media query on your desktop browser, as it will only execute on devices that match those parameters.

That may be one reason it appears not to work.

For testing in a desktop environment try using max-width and min-width instead, as these relate to the size of the browser window not the screen size of the device.

In fact, Google, in their words, strongly discourages use of *-device-width media queries for reasons relating to legacy browser reporting and adaptability (more details).

In terms of your question:

How to display image ONLY in mobile view using media queries?

Here's one method using just CSS:

.icon-xyz {
  display: none;
}
@media only screen and (min-width: 320px) and (max-width: 568px) and 
   (orientation: portrait) { .icon-xyz { display: inline; } }

<img class="icon-xyz" src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">

jsFiddle

这篇关于如何只在使用媒体查询的移动视图中显示图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！