爲響應式設計禁用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

回答

相關問題