Question

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;}
}

它似乎没有按预期工作。

可能值得指出我正在使用bootstrap 2.0

Answer 1

最好将所有默认样式设为适合移动设备，然后使用min-媒体查询进行调整：

div { /*put whatever your default styles are first*/ }

/* Then use the media query to hide it at 481 and wider */
@media all and (min-width:481px) {
    div { display:none }
}

查看320andup和Skeleton以及this page的CSS作为示例。查看this CSS底部的助手类，了解隐形/隐藏等之间的差异。

Answer 2

你可以把它放在第一个

/* 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使得任何具有重要性的东西总是会覆盖其他所有内容，无论文件位于何处，它都将成为主规则。

响应式设计css3在小屏幕上显示不大

2 个答案: