半岛权威十大直营(官方)网站

随着移动设备的普及和Web技术的不断发展，移动端用户体验的提升成为摆在开发人员面前的一大难题，并由此诞生了响应式网页设计的理念。那么什么是响应式网页设计呢？又有哪些好用的针对企业级的第三方响应式框架呢？本文为你一一揭晓。

什么是响应式网页设计？

根据维基百科的定义，响应式网页设计（Responsive web design，缩写为RWD）是一种网页设计的技术做法，可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。总结起来，响应式网页设计主要包括：

• 流式网格(Fluid Grids) - 页面元素使用相对单位如百分比调整大小，而不是绝对的单位如像素或点
• 灵活的图像 - 使用相对的单元或媒体查询，然后根据需要渲染出合适的尺寸
• 媒体查询(Media queries) - 根据设备宽度尺寸等元素的差异而使用不同 CSS 样式规则，最常用的是浏览器的宽度

要说明的一点是，响应式设计不仅仅针对移动设备上用户体验的提升，还针对基于浏览器的Desktop/PC。目前网络上提供一些免费的响应式框架，如 Twitter Bootstrap和 unsemantic 等等。这些开源框架能基本满足普通的的响应式网页设计需求，但若要开发需要大量数据网格和图表的企业级门户站点，还需要一些支持响应式框架的第三方控件。经测试发现，下面这两个第三方控件的网格控件能很好的实现企业级响应式Web设计。

DevExpress

DevExpress旗下的 DXperience WPF/Silverlight 界面组件，均拥有无与伦比的Grid和Chart控件。Data Grid仿真Office Outlook外观，是目前市面上最先进的数据网格控件，拥有如集成主从复合结构、多数据浏览选项等强大功能。开发人员可以根据它的实时数据源创建响应式的Web应用程序，能轻松实现上千条数据的实时刷新，且性能完全不受影响。>>DXperience WPF/Silverlight下载

另外还有一个不容错过的工具是专门针对移动设备的开发框架DevExtreme。它提供开箱即用的自适应设备的样式库，开发人员可以直接进行调用，非常之方便。>>DevExtreme下载

Infragistics

很多人大概不知道，界面组件 Infragistics 内有一个强大的支持响应式设计的 igGrid 控件。该控件提供四种设计模式：标准（默认）、响应式Web设计、自动隐藏的列、预定义网格模板。igGrid 针对屏幕的宽度提供了预定义的RWD模式配置文件：>>NetAdvantage Ultimate下载

• Phone - 最大到767像素。默认情况下支持这两种CSS类：ui-visible-phone 和 ui-hidden-phone；
• Tablet - 在768和979像素之间。默认情况下支持这两种CSS类：ui-visible-tablet 和 ui-hidden-tablet；
• Desktop – 980像素以上。默认情况下支持这两种CSS类：ui-visible-desktop 和 ui-hidden-desktop。

下面是一段在移动设备上隐藏产品ID的代码：

$(function () {
    $("#gridResponsive").igGrid({
        columns: [
            { headerText: "Product ID", key: "ProductID", dataType: "number" },
            { headerText: "Product Name", key: "Name", dataType: "string" },
            { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
        ],
        features: [
            {
                name: "Responsive",
                columnSettings: [
                    {
                        columnKey: "ProductID",
                        classes: "ui-hidden-phone"
                    }
                ]
            }
        ],
        width: "100%",
        dataSource: products
    });
});

了解Infragistics创建自定义响应式Web设计的更多资料，