响应式设计 css3 显示在小屏幕上而不是大屏幕上答案

【问题标题】：responsive design css3 show on small screens not on large响应式设计 css3 显示在小屏幕上而不是大屏幕上
【发布时间】：2015-08-17 15:29:38
【问题描述】：

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

【问题讨论】：

标签： css media-queries responsive-design

【解决方案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 底部的助手类，了解不可见/隐藏等之间的差异。

【讨论】：

【解决方案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 使得任何重要的内容总是覆盖其他所有内容，并且无论它在文件中的什么位置，它都将成为主要规则。

【讨论】：