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

这里有几个关键因素。

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

示例：

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

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

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

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

您不一定必须使用 resize事件和媒体查询。调整浏览器大小后，媒体查询将获取宽度并为元素指定样式。

Answer 2

扩展我上面的评论，而不是尝试通过JavaScript应用效果，而是使用CSS过渡来实现，使用媒体查询定位您想要的分辨率，然后只需使用JS通过切换类来启动效果。 / p>

这是一个纯粹的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>

Answer 3

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

如果您想在javascript中执行此操作，请尝试：

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

Answer 4

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

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

4 个答案: