为响应式设计禁用CSS

-2

我在我的网站上安装了以下CSS。我希望在浏览器宽度小于900像素时禁用它，但在浏览器宽度大于900时保持启用状态。关于如何执行此操作的任何建议？为响应式设计禁用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 
}

来源

2013-10-03 G Weg

写一个媒体查询，并只写入所有元素相同的复位CSS。不要忘记标记这些重要的信息，因为只有当您的案例中的重置行为才会起作用 –

并不是我不想帮助您，但这是您看到的第一件事情，如果您对响应式Web进行一些基础研究设计。谷歌是你的朋友，其他搜索引擎也是。 – RaptorDotCpp

谢谢你们。 @RaptorDotCpp大声笑，我试图寻找，但我没有找到任何我能理解的东西。想到这里的某个人很乐意提供一个简单的建议。 –

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

HTML

放在你的页面头下面的meta

<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-03 17:40:53 Romain

谢谢@Romain！这工作完美。非常感谢您的帮助。 –

另外，如果你想为所有设备创建一个响应式设计，你可以找到许多在线网站，它可以帮助你：http://www.responsinator.com/ 注意：大多数网站都不是模拟器，所以结果可能会根据设备不同（黑莓IOS吸） – Romain

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

@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-03 17:37:25 Esteban

我的建议是为您的移动产生二次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-03 17:44:35 Cam

谢谢，凸轮！欣赏它。 –

为响应式设计禁用CSS

回答

相关问题