CSS 未应用媒体查询规则

Question

我的任务是对仪表板式网站上的现有小部件进行小幅更新。当前的小部件在大屏幕上看起来很棒，但在小设备上却很糟糕。我正在尝试添加一些 CSS 规则，这些规则仅应在显示宽度等于或低于 768 像素时应用。

我使用 Bootstrap 进行了一些响应式设计。我不必滚动我自己的@media 查询。

这是 CSS...

@media (max-width: 768px) {  // Bootstrap sm.
    #sidenav { position: static; text-align: center; }
    #sidenav .primary-systems li {
        display: inline-block;
        width: auto;
    }
}
/* Stuff I added above;  stuff I inherited below */
#sidenav { width:265px; background-color: #fff; position: relative; left: -44px; top: 16px; border: 1px solid #000; padding: 8px 0; }
#sidenav ul { margin: 0; padding-left: 0; }
#sidenav div.hr { border-bottom: 1px dotted #353535; margin: 0 auto 15px auto; }
#sidenav li { list-style-image: none; list-style-type: none; margin-left: 0; }
#sidenav li a { white-space: nowrap; display: block; width: 170px; height: 50px; padding-left: 80px; font-family: 'lato'; font-weight: 400; line-height: 50px; font-size: 18px; color: #353535; text-decoration: none; background: transparent url("/jasig-widget-portlets/images/icons/sidenav.png") no-repeat 15px 0; }
#sidenav li a:hover { background-color: #f3f3f3; }
#sidenav .angel a { font-family:'Lato', sans-serif; background-position: 15px 0; }
#sidenav .web-advisor a { font-family:'Lato',sans-serif; background-position: 15px -50px; }
#sidenav .tartan-card a {font-family:'Lato',sans-serif; background-position: 15px -100px; }
#sidenav .course-schedule a {font-family:'Lato',sans-serif; background-position: 15px -150px; }
#sidenav .directory a {font-family:'Lato',sans-serif; background-position: 15px -200px; }
#sidenav .faq a {font-family:'Lato',sans-serif; background-position: 15px -250px; }
#sidenav .help-desk a {font-family:'Lato',sans-serif; background-position: 15px -300px; }
#sidenav .financial-aid a {font-family:'Lato',sans-serif; background-position: 15px -350px; }
#sidenav .transcripts a {font-family:'Lato',sans-serif; background-position: 15px -400px; }
#sidenav .important-dates a {font-family:'Lato',sans-serif; background-position: 15px -450px; }
#sidenav .semesters a {font-family:'Lato',sans-serif; display: none; }
#sidenav .banner { margin: 15px auto 15px 30px; }
#sidenav .support {font-family:'Lato',sans-serif; margin-top: 15px; padding-left: 20px; }
#sidenav p.secure {font-family:'Lato',sans-serif; margin: 20px; }
#sidenav p.server { margin-left: 24px; }

chrome 开发工具在源选项卡中显示该文件的当前版本（不是缓存问题）。继承的 CSS 规则有效；我添加的行没有效果。当您查看 Chrome 开发工具中的元素时，它们甚至不会出现在覆盖规则列表中。

谁能看到我遗漏了什么？

Answer 1

将您的媒体查询移至继承规则下方。 CSS 解析器将应用任何适用的规则，因为它按顺序解析文档。您需要在基本规则之后解析覆盖。

更新： 作为旁注，CSS 不支持 // 注释，因此解析器可能会被 // Bootstrap sn..至少你的 text-align 和 .primary-systems 规则应该应用，即使是当前的顺序。

Answer 2

您的选择器正在被媒体查询中选择器之后出现的具有相同特异性的其他选择器覆盖。

You can learn more about how the cascade works in css in the w3c docs.

快速解决方案是将媒体查询移到其他选择器下方。

CSS 未应用媒体查询规则

CSS media query rules not being applied

css

media-queries

responsive-design