css - 如何使现有的 Joomla 2.5 模板响应？

Question

我正在尝试使用 @media 查询使我现有的 Joomla 2.5 模板响应移动设备。我正在尝试做的是禁用小屏幕的右侧栏显示并设置宽度的文章内容覆盖 100% 的屏幕。我尝试了以下

@media only screen and (min-width:150px) and (max-width:600px) {
   .rightbar {
      display:none;
   }
   .container {
      width:100%;
   }
}

使用上面的代码，右侧栏在小屏幕中消失，但容器的宽度没有响应(不适合屏幕尺寸)。

现在我很困惑 Joomla 2.5 支持对现有模板的响应还是我对 @media 查询做错了什么？

Answer 1

Joomla 不参与 CSS 的工作方式。 CSS 是一种样式语言，而 Joomla 是一种用 PHP 编写的 CMS。模板是基于 HTML 的，就像您的普通静态站点一样，因此您编写的任何 CSS 都应该适用。您的容器可能未扩展的原因是可能有一个父元素以设置的宽度包裹在您的容器周围，或者容器类在其他地方被覆盖。最好的办法是使用 Chrome 开发工具或 Firebug 检查元素。这将向您展示在此场景中您需要知道的一切