响应式设计css3在小屏幕上显示效果不大
问题描述:
新增css3媒体查询和响应式设计。响应式设计css3在小屏幕上显示效果不大
我想知道如何在小屏幕上显示某些东西(比如div),但不能在大屏幕上显示。 我已经试过类似:
@media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
... 和更大的东西有如:
@media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
它似乎并不如预期的工作。
可能是值得指出的是,我使用的引导2.0
答
您可以在底部把这个第一
/* for small screens, only execute in if statement */
@media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
visibility:visible!important;
display:block!important;
}}
然后它把它的大屏幕(一直以来未执行在if语句)
.smallOnly {
visibility: none;
display: none;}
重要TG使它如此,随着重要事情始终覆盖一切,这将是主规则,无论它在哪里的文件中。