如何使现有的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 Dev Tools或Firebug检查元素。这将向您展示您在此场景中需要了解的所有内容

Answer 2

使现有模板响应并非易事。您可以尝试使用joomla http://storejoomla.org/extensions/responsivizer.html

的此扩展程序

我在多个网站上尝试过此组件，只有在检测到移动设备时，才能使用移动设备布局构建网站的移动版本。