隨著移動設備的普及和Web技術的不斷發展，移動端用戶體驗的提升成為擺在開發人員面前的一大難題，并由此誕生了響應式網頁設計的理念。那么什么是響應式網頁設計呢？又有哪些好用的針對企業級的第三方響應式框架呢？本文為你一一揭曉。

什么是響應式網頁設計？

根據維基百科的定義，響應式網頁設計（Responsive web design，縮寫為RWD）是一種網頁設計的技術做法，可使網站在多種瀏覽設備（從桌面電腦顯示器到移動電話或其他移動產品設備）上閱讀和導航，同時減少縮放、平移和滾動?？偨Y起來，響應式網頁設計主要包括：

• 流式網格(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設計的更多資料，