如何删除或隐藏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/