Joomla 3 Media Queries игнорируется

Question

Я пытался написать несколько медиа-запросов для шаблона Joomla 3, который я создаю (реплицируется из шаблона Protostar), и, к сожалению, я не добился большого успеха.

Я пытаюсь изменить цвет фона, который отображается на обычном рабочем столе, и у меня появляется следующий медиазапрос:

#sidebar {
    background:#fabe04;
  }

// Landscape phones and down
  @media(max-width:480px) {
    #sidebar {
    background:#FFF;
  }    
}

но по какой-то причине это игнорируется при обновлении, и ничего не меняется, даже если я изменил размер окна браузера.

Моя текущая установка состоит в том, что я создал другой файл css под названием custom.css, и он показывает стили, которые я добавил для веб-сайта нормального размера, но просто не распознает медиазапросы.

Если кто-то мог бы посоветовать, то был бы очень признателен

Спасибо

Спасибо Макшх и Никеш. Поскольку я использую шаблон protostar в качестве своей базы, тег viewport уже отображается как:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

и таблица стилей связана следующим образом:

// Добавить таблицы стилей $doc->addStyleSheet($this->baseurl . '/ Templates/' . $ This->template . '/Css/template.css'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/custom.css');

Пользовательская таблица стилей показывает все таблицы стилей для моего шаблона, но просто не распознает медиазапросы.

Я также попытался добавить! Важное к стилю в моем медиа-запросе, но ничего не изменилось.

Еще раз спасибо за ваше время.

Answer 1

Сначала проверьте метатег вашего порта просмотра.

<meta name="viewport" content="width=device-width, initial-scale=1">

Затем проверьте ваши медиа-запросы, сделайте их похожими по синтаксису!!

@media screen and (max-width:400px){

}// or else

@media (max-width:400px){

}

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

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="media.css" />

последний вариант - использовать! важный

@media(max-width:480px) {
    #sidebar {
      background:#FFF !important;
    }  
}