jQuery中的动画适用于桌面，但不适用于移动设备

Question

我有一个动画，当页面加载时触发，它是一个从右到左的图像，非常简单。现在，它在桌面上运行得非常好，但在移动设备上则不太好。是否有任何方法可以应用类似媒体查询的内容，因为它是用css完成的，但对于jQuery？

Answer 1

您实际上可以通过使用隐藏元素并为某些CSS属性（如z-index）设置特定值来尝试组合CSS媒体查询和JS。然后，您可以使用JS检查此属性的值，并相应地设置移动变量。

我发现这比在JS中获取视口宽度更准确。或者至少它确保JS中变量为真的点与CSS发生变化的时间完全相同。

<强> CSS

 find_package(OpenSSL REQUIRED) 
if( OpenSSL_FOUND )
    include_directories(${OPENSSL_INCLUDE_DIRS})
    link_directories(${OPENSSL_LIBRARIES})
    message(STATUS "Using OpenSSL ${OPENSSL_VERSION}")

target_link_libraries(project_name /path/of/libssl.so /path/of/libcrypto.so)

<强> JS

#test {
  display: none;
  z-index: 1;
}

@media only screen and (max-width: 400px) {
  #test {
    z-index: 2;
  }
}

修改
优选地，您不应仅为此目的使用额外的隐藏元素。您通常应该有一些现有元素可以通过媒体查询以某种方式进行更改，您可以检查它。就像在桌面视图中固定而不是移动设备的标题，或者可能是桌面200px宽的标识，移动设备只有100px的标识。你明白了。