告诉div根据屏幕大小更改大小时遇到​​问题

Question

我在Dreamweaver中制作网站（带引导程序。）我试图告诉div在屏幕大于992px时宽度为75％，当屏幕小于992px时为100％宽度。我可能做错了什么想法？

@media (min-width: 768px) and (max-width: 991px){
}
 .bar {
   width: 100%;
   background-color: #C54345;
}
@media (min-width: 992px) {
}
 .bar {
   width: 75%;
   background-color: #C54345;
}

Answer 1

很可能被覆盖。检查这一点的一个好方法是在浏览器中启动项目并使用开发人员工具查看通过斜杠表示的CSS被覆盖的内容。

通常情况下，我不会采取这种方式。我不知道你的确切情况，但这样做并不是真的会在标准方面削减它。

相反，因为您正在使用引导程序，我建议您查看＆＃34; hidden-xs＆＃34; /＆＃34; visible-xs＆＃34;内置于bootstrap的类。我猜你在平板电脑上尝试做的事情比在更大的屏幕尺寸上做的要好，反之亦然。

Answer 2

您在错误的位置有括号，打开后立即关闭了媒体查询括号！否则代码很好。
您的代码应如下所示：

@media (min-width: 768px) and (max-width: 991px){
    .bar {
       width: 100%;
       background-color: #C54345;
    }
}
@media (min-width: 992px) {
     .bar {
       width: 75%;
       background-color: #C54345;
    }
}

工作演示 here