响应JavaScript事件

Question

我对“最佳”当前的方法有些疑惑来区分在特定的屏幕尺寸JavaScript函数，因为所有的答案说不同的东西，他们不相信了。据我了解，打造“响应Javascript函数”的方法是：

matchMedia()功能

if (window.matchMedia('(max-width: 500px)').matches) {

width()函数施加到窗口

if ($(window).width() < 500) {

而且，我还没有在这里看到的另一种方法是：

if ($(".sampleClass").css("float") == "none") {

基本上检查，在一个CSS媒体查询更改任何CSS属性：

.sampleClass {float:left;}
@media only screen and (max-width: 800px){
    .sampleClass {float:none;}
}

什么是为了写jQuery的功能在某些屏幕尺寸是当前“最好”的方法？

Answer 1

我相信上面的选项是解决这个问题的主要途径。至于哪一个选择：

使用window.width是具有视条件代码，据我所知道的最常见的方式。但是，这也有一些缺点，因为是它并不总是跨浏览器一致。它通常会完成这项工作，虽然。

Matchmedia是你一个更加一致的选项并不需要担心支持旧的浏览器，所以一定要检查是否有此功能的支持：https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

比较基于一个CSS媒体查询类的最后一个方法也将更加一致，你不必担心浏览器的支持。这是一个有点冗长不过，所以你必须考虑到这一点。

综合来看，虽然，这些将全部工作。只是有一些细微的差别考虑。