无法让css媒体查询工作

Question

我有一个脚本将html横幅附加到页面上。这些横幅使用的是唯一的ID，可在点击时触发灯箱。这些灯箱在平板电脑上存在显示问题，因此我想要的解决方案是将它们作为平板电脑和其他移动设备上的单独页面打开。

脚本功能正常，用于确定页面上隐藏元素的“position”属性。如果该位置是“绝对的”，那么它将添加与正常情况略有不同的横幅代码。

我想让媒体查询检测平板电脑/移动设备，如果是，请将隐藏元素的position属性设置为“absolute”;这样它就会附加必要的代码。

我的媒体查询如下所示：

@media only screen 
and (max-device-width : 768px) 
and (max-device-width : 1024px) {

td > #mobileComfortDepth { position: absolute; }
}

这似乎对我不起作用。我做错了吗？还是有更好的方法来实现我的目标？

提前谢谢！

编辑查询：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

td > #mobileComfortDepth { position: absolute; }
}