Блог

У меня есть следующий код в моем _header.html.erb

       <a class="navbar-brand" href="#"> Brand </a>
  

Я хочу, чтобы это отображалось на мобильных устройствах, но не на больших дисплеях…

У меня есть:

 .navbar-brand {
     visibility:hidden;
}
  

в моем общем css.

Я использую медиа-запросы для противодействия приведенному выше коду, но безуспешно.

 @media screen and (device-aspect-ratio: 40/71) {
    .navbar-brand{
         visibility:visible;
    }
}
  

В результате бренд нигде не отображается.

Приведенный выше код предназначен для iPhone5. Возможно ли, что другие устройства имеют тот же a-r и дисплей не будет отображаться? Или приведенный выше @media является подходящим способом для достижения того, чего я пытаюсь достичь.

Я бы посоветовал использовать width для медиа-запроса для целевых телефонов, если вы согласны с тем, что пользователь минимизирует ширину браузера и видит тот же результат

 .navbar-brand {
    display: block;
}

@media only screen 
and (max-width : 321px) {
.navbar-brand {
    display: none;
}
  

И да, возможно, что другие устройства имеют такое же соотношение. По моему опыту, указывать этот способ проблематично, и я советую способ, описанный выше. Если вы действительно хотите настроить таргетинг на определенное устройство, выполните быструю проверку скриптом строки пользовательского агента конкретного устройства и загрузите специальный CSS для этого устройства под вашим обычным CSS.

В CSS, если у вас есть два правила, которые нацелены на один и тот же элемент, существует ряд факторов, которые определяют, какое из них применяется. Для нас важны специфичность и порядок.

Специфичность означает «какое правило более конкретное?». Рассмотрим этот HTML:

 <div>
    <p>Test</p>
</div>
  

И этот CSS:

 div p { 
    color: red;
}

p { 
    color: blue;
}
  

В этом случае текст будет красным. div p это более конкретный селектор, поэтому это правило переопределяет красный текст, установленный p селектором.

Если два правила имеют одинаковую специфику, то в игру вступает порядок. Более поздние правила имеют приоритет. Давайте изменим наш CSS выше на следующий:

 div p { 
    color: red;
}

p { 
    color: blue;
} 

div p { 
    color: green;
}
  

Теперь у нас есть два правила с одинаковой спецификой. Будет применяться последнее, поэтому наш текст будет зеленым.

Итак, как это связано с вашей проблемой? Двумя способами:

1. Медиа-запросы не повышают специфичность.
2. Конвейер ресурсов Rails может изменить ваш порядок CSS.

Если ваш мобильный CSS включен в тот же файл, что и ваши стили рабочего стола, убедитесь, что он находится внизу вашего файла, чтобы ваши мобильные правила переопределяли ваши глобальные правила выше. И если вы помещаете его в отдельный файл, вам придется перечислить все свои CSS-файлы в app/assets/stylesheets/application.css и поместить свои mobile.css в самый низ своих //= require правил, чтобы они загружались после всех остальных. Если вы разрешите Rails //= require_tree . включать вашу таблицу стилей для мобильных устройств, порядок будет неопределенным (но почти всегда в алфавитном порядке). Это означает, что ваши мобильные правила не будут применяться, если они пытаются переопределить что-то в файле, начинающемся со второй половины алфавита. Ваши правила, не связанные с медиа-запросами, переопределят те, которые запрашиваются медиа.

Я понимаю, что это устарело, но ответ для меня был немного другим, и хотя мне не нравится мой ответ, поскольку я стараюсь избегать использования (!important), когда это возможно, единственное, что сработало для меня в настоящее время, это добавить !important после моей желаемой настройки видимости в медиа-запросе.

 .menuNavDropdown {
    visibility: visible !important;
}