刪除某些屏幕尺寸的元素

我目前使用媒體查詢創建響應式網頁設計。對於移動設備，我想刪除我的JS滑塊並將其替換爲其他內容。我查看了.remove()以及JQuery庫中的其他一些內容，但是這些必須在HTML中實現，並且我無法從CSS角度想到解決方法。刪除某些屏幕尺寸的元素

來源

2013-07-20 sam_7_h

你可以隱藏一個e使用'css'的媒體查詢來顯示另一個視屏幕大小。 –

不是100％確定你的意思。但是我創建了一個「無移動」的類別，添加到不應在移動設備上顯示的元素。在媒體查詢中，我將no-mobile設置爲：none ;.

@media screen and (max-width: 480px) { 

     .nomobile { 
      display:none; 
     } 
}

來源

2013-07-20 12:42:40 user2515479

你需要刪除它們，或者只是隱藏它們嗎？如果只是躲在是好的，那麼你就可以display:none結合媒體查詢：

#mySlider{ 
    display: block; 
} 

@media (max-width: 640px) 
{ 
    #mySlider 
    { 
     display: none; 
    } 
}

來源

2013-07-20 12:42:53

取決於隱藏它是否仍會加載滑塊和圖像，因爲更改滑塊的原因之一不是由於它的大小，而是爲了更快的移動加載時間創建較輕的重量元素。 –

如果你隱藏它，它仍然會加載。 – hungerstar

您還可以使用jQuery功能addClass（）和removeClass（）或removeAttr()實現你的目的。

例子：

$(window).resize(function(){ 
     if(window.innerWidth < 500) { 
      $("#slider").removeAttr("style"); 

     } 
});

或者你也可以使用媒體查詢如下：

#mySlider{ 
    display: block; 
} 

@media (max-width: 500px) 
{ 
    #mySlider 
    { 
     display: none; 
    } 
}

來源

2013-07-20 12:45:13

您可以隱藏某個元件與另一取決於屏幕尺寸使用媒體查詢從css表明，這是從我的一個現場項目（我用這個來顯示/隱藏圖標）

@media only screen and (max-width: 767px) and (min-width: 480px) 
{ 
    .icon-12{ display:none; } // 12 px 
    .icon-9{ display:inline-block; } // 9px 
}

來源

2013-07-20 12:45:42

刪除某些屏幕尺寸的元素

回答

相關問題