如何使 fadeIn() 和 hide() 仅适用于平板电脑和桌面版本？

Question

我有以下 CSS 来隐藏我的页面元素之一：

@media only screen {
  #page-element-1 {
    display: none;
  }
}

和以下 JS 在单击另一个元素时淡入该元素。:

$('page-element-2').click(function(){
  $('#page-element-1').fadeIn();
}

但是我只想在平板电脑和台式机上淡入元素。我该怎么做？

我确实尝试过将 js 包装成类似这样的东西：if (screen.width >= 769){}。但即便如此，当我调整浏览器大小时，我确实看到 #page-element-1 为

element.style {
  display:block
}

覆盖：

#page-element-1 {
  display: none;
}

Answer 1

要查看更改，您应该使用 chrome 和 firefox 中提供的移动仿真，然后重新加载页面。那并使用 media queries.

Answer 2

正如其他人所建议的那样，最好的方法是在 css 中使用关键帧。

如果您想在 javascript 中完成，请尝试：

if ($(window).width() < 796) {
    //DO STUFF
}

Answer 3

这里有几个关键因素。

确保 <head> 元素中有 <meta name="viewport" content="width=device-width" />。
正如@Shaggy 所说，您需要使用 media queries 才能达到预期效果。

示例：

@media (min-width: 768px) {  // tablets can't go below 768px
    #someID {
       // styles
    }
}

所选设备的其他媒体查询here

至于您的 javascript 计算浏览器的调整大小，这仅适用于文档加载，除非您使用 resize 事件。

$(window).on('resize', function() {
    // throw your resize code here for whatever you want to hide/show
    if (window.screen.availWidth > 768 {
           ......
    }
});

您不一定要同时使用 resize 事件和媒体查询。调整浏览器大小后，媒体查询将选择宽度并为元素分配样式。

Answer 4

扩展我上面的评论，而不是尝试通过 JavaScript 应用效果，而是使用 CSS 转换来实现，通过媒体查询定位你想要的分辨率，然后只使用 JS通过切换 class.

来启动效果

这是一个纯 JS 的概念验证，点击绿色 div 显示上面的红色 div：

document.getElementById("shown").addEventListener("click",function(){
    document.getElementById("hidden").classList.toggle("shown");
},0);

#hidden{
    background:red;
    height:0;
}
@media all and (min-width:769px){
    #hidden{
        opacity:0;
    }
    #hidden.shown{
        opacity:1;
        transition:opacity .5s;
    }
}
#hidden.shown{
    height:100px;
}
#shown{
    background:green;
    cursor:pointer;
    height:100px;
}

<div id="hidden"></div>
<div id="shown"></div>

如何使 fadeIn() 和 hide() 仅适用于平板电脑和桌面版本？

How to make fadeIn() and hide() work only for tablet and desktop versions?

javascript

css

media-queries