2

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

大部件的文本显示，而小部件的较小文本不显示。我很确定这与每个人使用的脚本有关。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

再次感谢一切！！

4

1 回答 1

0

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

如果你不想使用库，这篇关于在 JavaScript 中对媒体查询做出反应的帖子将通过一种方式来完成你所追求的 vanilla JavaScript。

这是一个jsFiddle Demo带有一些工作示例代码的示例代码，Fullscreen jsFiddle Demo这是一个 ，在尝试测试它的工作原理时很方便。如果您使用全屏版本并使浏览器窗口小于600px宽，javascript 警报会告诉您您已经这样做了。因为警报出现了，浏览器会跳回到原来的大小，并告诉你它变大600px了。所以你可以看到，它在匹配的时候调用了match函数（所以在加载的时候和resize到更大宽度的时候），当resize到更小的宽度时它调用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");
    }
});
于 2013-09-19T07:34:44.720 回答