Мне поручено сделать небольшое обновление существующего виджета на веб-сайте в стиле панели. Текущий виджет отлично смотрится на больших экранах, но ужасно на небольших устройствах. Я пытаюсь добавить несколько правил CSS, которые должны применяться только тогда, когда ширина экрана равна или ниже 768 пикселей.Правила CSS-запросов СМИ не применяются
Я работал с отзывчивым дизайном немного, используя 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; }
хромированной Дев инструменты показать текущую версию этого файла на вкладке Sources (не проблема кэша). Унаследованные правила CSS работают; строки, которые я добавил, не влияют. Они даже не отображаются в списке переопределенных правил, когда вы смотрите на элементы в инструментах Chrome dev.
Может ли кто-нибудь увидеть, что мне не хватает?
Не связанные с вашей проблемой, ваши селекторы излишне специфичны, и их будет сложно поддерживать. – zzzzBov
@zzzzBov - Хорошая проницательность, но в этом случае я боюсь. Это веб-сайт в стиле панели инструментов, состоящий из небольших элементов страницы (виджетов), которые разрабатываются, поддерживаются и стилю независимо. Я показываю только 1 из примерно 10 файлов CSS, загруженных полным DOM. Мы используем селекторы с большей специфичностью, чтобы не влиять на зоны друг друга. –
Есть намного лучшие способы управления стилями, чем увеличение специфики. Подумайте о том, как использовать препроцессор типа LESS или Sass и использовать масштабируемую технику, такую как SMACSS, OOCSS или BEM. – zzzzBov