Question

我在我的网站上设置了以下CSS。我希望当浏览器宽度小于900像素时禁用它，但是当浏览器宽度大于900时保持启用。有关如何执行此操作的任何建议吗？

谢谢！

.image-slide-title {
  display: block !important;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 1;
  z-index: 2000;
  font-family: "open sans";
  font-size: 100%;
  font-weight: 100;
  margin-bottom: 100px;
  line-height: 1.8;
  color: #333
}

Answer 1

我相信你正在寻找媒体查询。

@media (max-width: 899px) {
    .image-slide-title {
        display: none !important;
    }
}

不要忘记在你的HTML上执行此操作：

<!DOCTYPE html>
<html lang="en">
<head>
        <meta name="viewport" content="width=device-width" />

Answer 2

不要忘记为较小的设备添加html标记：

<强> HTML

将以下元数据放入页面头

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<强> CSS

.image-slide-title {
          display: block !important;
          height: 100%;
          width: 100%;
          position: absolute;
          top: 1;
          z-index: 2000;
          font-family: "open sans";
          font-size: 100%;
          font-weight: 100;
          margin-bottom: 100px;
          line-height: 1.8;
          color: #333
        }

     @media screen and (max-width: 900px) {
          .image-slide-title {
             /* do what you want here */
             display: none !important;
          }
      }

老实说，如果您可以删除重要标签，那么管理响应效果会简单得多

Answer 3

我的建议是为您的手机创建辅助css页面。

<link rel="stylesheet" media="screen and (min-width: 901px)" href="style.css" />
<link rel="stylesheet" media="screen and (max-width: 900px)" href="mobile-style.css" />

然后在该样式表中有特定于此的设置。

禁用CSS以进行响应式设计

3 个答案: