0

我的网站上有以下 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
}
4

4 回答 4

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;
          }
      }

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

于 2013-10-03T17:40:53.467 回答
2

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

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

不要忘记在您的 html 上执行此操作：

<!DOCTYPE html>
<html lang="en">
<head>
        <meta name="viewport" content="width=device-width" />
于 2013-10-03T17:37:25.353 回答
0

我的建议是为您的手机创建一个辅助 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" />

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

于 2013-10-03T17:44:35.487 回答
0

只需要添加媒体查询


@media screen and (max-width: 1200px) {
  .div-name {
    width: max-content !important;
  }
}

这种用法避免重新调整您的弹性系统，并且您实现了一个坚实的结构不会影响屏幕调整大小

于 2021-12-31T15:26:05.990 回答