Question

大家好，我试图禁用某些设备宽度的图像并且它不起作用，这里是代码： HTML

<figure id="quote-one">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</blockquote>
<figcaption>Dummy text  </figcaption>
<img src="http://65.media.tumblr.com/avatar_b557ab7102d7_6.png"> 
</figure>

的javascript

<script>
window.matchMedia( "(min-width: 20em)" and ("max-width:45em"))
.addListener( function( mm ){
if( mm.matches ){
var el= document.querySelector("#quote-one").getElementsByTagName("img")[0]
el.style.display = "none";}
} );
</script>

https://jsfiddle.net/a56019r4/ 谢谢。

Answer 1

您的媒体查询字符串的语法不正确。 logical and operator属于字符串，如下所示：

window.matchMedia("(min-width: 20em) and (max-width:45em)")

此外，请注意，只有在媒体更改时才会触发此事件，因此您必须执行操作才能触发事件（可能会尝试更改显示的方向））。

您可以在下面的代码段中看到有效的代码：

＆＃13;

window.matchMedia("(min-width: 20em) and (max-width:45em)").addListener(function(mm) {
  var el = document.querySelector("#quote-one img");
  if (mm.matches) {
    el.style.display = "none";
  } else {
    el.style.display = "block";
  }
});

＆＃13;

<figure id="quote-one">
  <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
  <figcaption>Dummy text</figcaption>
  <img src="http://65.media.tumblr.com/avatar_b557ab7102d7_64.png">
</figure>

＆＃13;

这是你小提琴的固定版本： https://jsfiddle.net/a56019r4/2/

通过javascript matchmedia样式无法正常工作

1 个答案: