随着越来越多的网络设备投入市场，人们用不同的工具浏览互联网。智能手机、平板电脑、便携式游戏设备、车载娱乐单元甚至家用电器，如冰箱，都让用户能够整天保持与互联网的连接。

然而，考虑到大多数网站都是为在个人电脑上查看而设计的，它们并没有提供最佳的可视体验。需要捏、放大和眯眼才能看到阅读内容，这不仅麻烦，而且令人烦恼。在一段时间内，移动检测解决了许多这些问题。然而，随着市场上越来越多的设备发布，跟踪不同屏幕分辨率和所需的显示和布局检测方法变得越来越困难。

目前，解决多个设备问题的最有效解决方案是响应式设计。如果您还没有了解响应式设计，那么您可能会错过网络设计中最新的趋势之一。不是依靠框架和扩展进行设备检测，个人完全依靠浏览器分辨率，相应地显示不同的布局以匹配。

响应式设计

响应式设计根据用户可能如何感知它来改变和适应网站。无论是在移动设备、平板电脑还是台式电脑上，能够根据不同的分辨率和查看方式适应和改变设计和布局，可以增强整体的用户体验。

值得注意的是，这与Joomla中的模板框架或插件可能的工作方式不同。生成移动网站的传统或更常见的方法是检测用户使用特定模板框架或Joomla扩展的设备，然后相应地显示模板或布局。

另一方面，响应式设计使用CSS媒体查询和多个级联样式表来渲染网站的布局。更有趣的是，您可以根据设备的方向（如平板电脑从纵向模式切换到横向模式）具有不同的显示和布局。

这种响应式设计方法旨在为用户提供在设备或平台上查看内容时的最佳视觉显示体验。

这并不是什么新鲜事，事实上，许多网站都使用类似的技术来显示网站的打印版本，除了品牌和内容外，隐藏不相关的元素以节省打印资源。

变为响应式

为您的 Joomla 网站创建响应式网站设计不是一个简单的过程。这需要良好的甚至出色的 HTML 和 CSS 知识。创建响应式模板的一种方法就是使用媒体查询。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="/mobile.css" />

如果最大屏幕宽度为 320px，此 CSS 引用将调用 mobile.css 文件。

这是显示您的网站打印版本所使用的相同方法。

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

浏览器将检测您可能有的浏览器分辨率，并相应地加载不同的样式表。此方法还可以应用于横向和纵向布局之间的屏幕方向。

实现响应式模板的另一种方法是将流体 CSS 布局与固定宽度布局相对比。将您的网站宽度设置为 100%，并将图片设置为可调整大小，是创建可以在许多不同屏幕分辨率上工作的网站模板的良好起点。

img { max-width: 100%; } or img { width: 100%; } for IE

这些技术在所有浏览器中都不起作用，应相应地进行测试，但大多数现代浏览器和移动设备都将支持这些方法，这正是您试图达到的目标。

不深入模板编码的细节，更多关于实现响应式设计的资源可以在网上找到。

您的 Joomla 网站会利用它吗？

您的网站是否可以利用响应式设计纯粹取决于您的受众。

如果您发现许多网站访客使用移动设备访问您的网站，或者您通过 Twitter 或其他面向移动的社交网络平台与用户互动，那么让您的网站以良好的移动/响应式设计呈现可能非常有益。

Joomla 响应式设计的未来

随着越来越多的企业和组织希望并需要为他们的网站提供响应式设计，我们将开始看到更多的模板公司为 Joomla 制作包含响应式设计的模板。

在未来的 Joomla 版本的内核中看到一些响应式设计功能，或者至少与后台模板一起分发，可以为管理您的 Joomla 网站开辟新的可能性。

已经有相当多的模板可以用于在移动设备和除台式机或笔记本电脑以外的设备上管理 Joomla，但想象一下能够快速加载并适应不同的屏幕和平台，而只需使用一个模板，并且不需要为不同的情况使用不同的模板。

响应式设计可以极大地帮助用户的另一个领域是网络可访问性。由于视觉障碍而需要放大网站的用户可能会发现，导航一个不适应其视点的网站比较困难。响应式用户界面可以极大地提高可用性。

拥抱响应式设计以改善网络可访问性是所有人的胜利。在不同屏幕分辨率上的布局的细微变化可以改善可用性，更重要的是，让您的在线信息被目标用户阅读。

如果您对 Joomla 的移动体验和可用性感兴趣，请访问 http://ux.joomla.org，加入并参与对话。最终结果是大大提高所有用户的 Joomla 用户体验。