如何使现有的 Joomla 2.5 模板响应？答案

【问题标题】：How to make existing Joomla 2.5 template responsive?如何使现有的 Joomla 2.5 模板响应？
【发布时间】：2014-07-28 12:13:11
【问题描述】：

我正在尝试使用 @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 查询做错了什么？

【问题讨论】：

显示拼写错误，请尝试修复。

标签： css joomla joomla2.5

【解决方案1】：

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

【讨论】：

【解决方案2】：

使现有模板具有响应性并非易事。你可以试试这个joomla的扩展http://storejoomla.org/extensions/responsivizer.html

我在几个网站上试用了这个组件，它允许您仅在检测到移动设备时使用移动就绪布局构建您网站的移动版本。

【讨论】：