如何刪除或隱藏div在響應HTML

Question

我有一個容器，在桌面版本顯示4圖片內聯（包含4個div），但如何刪除他們中的一個或兩個，因爲我想在平板上顯示3個圖片內聯版本和2張圖片在移動版本。

我可以在媒體查詢中刪除或以某種方式隱藏該div（圖片）嗎？或者如果我從移動第一次開發開始就如何添加圖片。

在此先感謝。

Answer 1

試試這個媒體查詢與第n個孩子財產

/* Smartphones ----------- */ 
@media only screen and (max-width : 767px) { 
    .ur_class:nth-child(3), 
    .ur_class:nth-child(4) { 
     display: none; 
    } 
} 

/* Tab ----------- */ 
@media only screen and (max-width : 991px) and (min-width : 768px) { 
    .ur_class:nth-child(4) { 
     display: none; 
    } 
} 

Answer 2

爲您要在移動設備上隱藏的圖片輸入合適的類名，例如hide-on-mobile-portrait，並在針對移動設備的媒體查詢中爲其指定display: none。

像這樣：

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
    .hide-on-mobile-portrait { 
     display: none; 
    } 
} 

你可以採取更多的從這裏媒體查詢：https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/