Question

我创建了两个css类（hidedesktop和hideonmobile），以便我可以根据用户是在桌面设备还是移动设备上有选择地隐藏元素。

但我注意到，尽管在桌面，移动和横向方面工作正常，但任何一个类的元素都不会以纵向显示在iPad上。有没有人有关于如何克服这个问题的任何提示？

@media only screen and (min-width: 768px) {
.hidedesktop{ display: none; }
}

@media (max-width: 768px) {
.hideonmobile{ display: none; }
}

Answer 1

尝试

    @media screen and (min-width: 768px) {
       .hidedesktop{ display: none; }
       .hideonmobile{ display: block; }
    }

    @media screen and(max-width: 768px) {
       .hideonmobile{ display: none; }
       .hidedesktop{ display: block; }
    }

Answer 2

您的两个媒体查询都会隐藏768px的元素。受min-width媒体查询影响的第一个值为768px，max-width媒体查询的最后一个值为768px

将移动设备的最大宽度设置为767像素，将桌面最小宽度设置为更大的值，即992像素，以便进行媒体查询

@media screen and (min-width: 992px) {
.hidedesktop{ display: none; }
}

@media screen and(max-width: 767px) {
.hideonmobile{ display: none; }
}

隐藏在iPad上的CSS元素

2 个答案: