我有一個容器,在桌面版本顯示4圖片內聯(包含4個div),但如何刪除他們中的一個或兩個,因爲我想在平板上顯示3個圖片內聯版本和2張圖片在移動版本。如何刪除或隱藏div在響應HTML
我可以在媒體查詢中刪除或以某種方式隱藏該div(圖片)嗎?或者如果我從移動第一次開發開始就如何添加圖片。
在此先感謝。
我有一個容器,在桌面版本顯示4圖片內聯(包含4個div),但如何刪除他們中的一個或兩個,因爲我想在平板上顯示3個圖片內聯版本和2張圖片在移動版本。如何刪除或隱藏div在響應HTML
我可以在媒體查詢中刪除或以某種方式隱藏該div(圖片)嗎?或者如果我從移動第一次開發開始就如何添加圖片。
在此先感謝。
試試這個媒體查詢與第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;
}
}
爲您要在移動設備上隱藏的圖片輸入合適的類名,例如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/
您使用的引導?如果是,那麼隱藏或取消隱藏內容的內置課程特別是分辨率爲 –