Question

我在我的布局中使用了一个小部件，我现在已经拥有它，所以当某个断点被击中时，它将不会显示那个更大的小部件然后转到更小的小部件。较大的小部件会隐藏，较小的小部件会显示，但与两者关联的文本不正确。

大小部件显示的文本和小小部件的较小文本不显示。我很确定它与每个使用的脚本有关。 display none确实隐藏了元素，但脚本似乎仍在运行。

我对JavaScript还没有任何线索，如果可能的话，我更喜欢HTML或CSS答案。如果没有，那么我会选择JS，但需要一些方向。我已经阅读了很多文章，甚至在学习JS的过程中，但仍然不确定我所阅读的内容是如何适用的。

@media all and (max-width: 900px) {
  // styles
}

if (document.documentElement.clientWidth < 900) {
  // scripts
}

我发现这似乎是我需要的，但我不确定如何调用我需要的脚本的语法。我是否只是将脚本本身放在那里而没有任何其他信息？我也读过关于使用jquery来做这样的事情

$(window).resize(function() {
if ($(this).width() > 480) {
  // call supersize method
}
});

我甚至已经阅读过使用Modernizer来做这件事，但我仍然需要阅读文档。

在bin中它根本不显示任何文本，但是较大的文本存在于小部件的旁边。我只需关闭那个大脚本，然后在某个媒体查询中打开另一个脚本。

非常感谢任何帮助。

HTML

  <aside class="smallScreen">
      <div class="smallWeather" style='width: 200px; height: 440px; background-image:
  url(http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/red_500x440_bg.jpg
  ); background-repeat: no-repeat; background-color: #993333;' ><div 
  id='NetweatherContainer' style='height: 420px;' ><script src='http://...'></script>  
  </div></div></aside>
  </div></div></div></aside>


  <aside class="largeScreen">
      <div class="largeWeather" style='width: 500px; height: 440px; background-image:
  url(http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/red_500x440_bg.jpg
  ); background-repeat: no-repeat; background-color: #993333;' ><div 
  id='NetweatherContainer' style='height: 420px;' ><script src='http://...'></script>  
  </div></div></aside>

CSS

  @media screen and (min-width: 564px) and (max-width: 604px) {
  .largeScreen {
display: none;
}

  .smallScreen {
display: block; 
width: 55%;
min-width: 240px;
height: 100%;
font-size: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.2rem;
}

  .smallWeather {
position: relative;
display: block;
width: 240px;
height: 420px;  
background: white;
margin-left: auto;
margin-right: auto;
}

这样做的最佳方法是什么？请为什么？从移动性能的角度来看，jQuery是最好的方式吗？

更新：使用enquire.js是因为它采用了直接的方式（虽然我对它的使用还有点粗略）以及它有多小。

这是基本代码：

enquire.register("screen and (max-width: 605px)", {

// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},      

// OPTIONAL
// If supplied, triggered when the media query transitions 
// *from a matched state to an unmatched state*.
unmatch : function() {},    

// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},    

// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function 
// until the first time the media query is matched
deferSetup : true,

// OPTIONAL
// If supplied, triggered when handler is unregistered. 
// Place cleanup code here
destroy : function() {}

});

仍未完成，并寻求更多支持。现在我选择了这条路线，我发现有很多关于enquire.js的文章和问题。我会在阅读时更新我的情况。

更新：这就是我所在的地方，但它还没有运作。我仍然在HTML中显示与每个脚本关联的样式，并且显示没有相应的使用。一旦我获得了enquire.js，这项工作是否正确？

这是新的jsbin

再次感谢你的一切!!

Answer 1

我认为您正在寻找像enquire.js这样的东西，它是一个用于响应CSS媒体查询的轻量级JavaScript库。

如果您不想使用库，this post on reacting to media queries in JavaScript会运行一种使用vanilla JavaScript执行操作的方法。

这是一个带有一些工作示例代码的 jsFiddle Demo ，这里有一个 Fullscreen jsFiddle Demo ，在尝试测试它是如何工作时很方便。如果您使用全屏版本并使浏览器窗口的宽度小于600px，则javascript警报会告诉您已完成此操作。由于警报出现，浏览器将跳回原始大小并告诉您它再次大于600px。所以你可以看到，它在匹配时调用匹配函数（所以在加载时和调整大小时调整到更大的宽度），并在调整大小到更小的宽度时调用unmatch函数，因为那时媒体查询不再匹配了。这就是你根据屏幕大小调用某个功能仅适用于移动设备或仅适用于桌面的功能。

<强> JS

enquire.register("screen and (min-width:600px)", {
    match: function () {
        alert("Now the screen width is more than 600px");
    },
    unmatch: function () {
        alert("Now the screen width is less than 600px");
    }
});

根据媒体查询关闭和打开脚本？

1 个答案: