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

什么是響應(yīng)式網(wǎng)頁設(shè)計？

根據(jù)維基百科的定義，響應(yīng)式網(wǎng)頁設(shè)計（Responsive web design，縮寫為RWD）是一種網(wǎng)頁設(shè)計的技術(shù)做法，可使網(wǎng)站在多種瀏覽設(shè)備（從桌面電腦顯示器到移動電話或其他移動產(chǎn)品設(shè)備）上閱讀和導(dǎo)航，同時減少縮放、平移和滾動。總結(jié)起來，響應(yīng)式網(wǎng)頁設(shè)計主要包括：

• 流式網(wǎng)格(Fluid Grids) - 頁面元素使用相對單位如百分比調(diào)整大小，而不是絕對的單位如像素或點
• 靈活的圖像 - 使用相對的單元或媒體查詢，然后根據(jù)需要渲染出合適的尺寸
• 媒體查詢(Media queries) - 根據(jù)設(shè)備寬度尺寸等元素的差異而使用不同 CSS 樣式規(guī)則，最常用的是瀏覽器的寬度

要說明的一點是，響應(yīng)式設(shè)計不僅僅針對移動設(shè)備上用戶體驗的提升，還針對基于瀏覽器的Desktop/PC。目前網(wǎng)絡(luò)上提供一些免費的響應(yīng)式框架，如 Twitter Bootstrap和 unsemantic 等等。這些開源框架能基本滿足普通的的響應(yīng)式網(wǎng)頁設(shè)計需求，但若要開發(fā)需要大量數(shù)據(jù)網(wǎng)格和圖表的企業(yè)級門戶站點，還需要一些支持響應(yīng)式框架的第三方控件。經(jīng)測試發(fā)現(xiàn)，下面這兩個第三方控件的網(wǎng)格控件能很好的實現(xiàn)企業(yè)級響應(yīng)式Web設(shè)計。

DevExpress

DevExpress旗下的 DXperience WPF/Silverlight 界面組件，均擁有無與倫比的Grid和Chart控件。Data Grid仿真Office Outlook外觀，是目前市面上最先進的數(shù)據(jù)網(wǎng)格控件，擁有如集成主從復(fù)合結(jié)構(gòu)、多數(shù)據(jù)瀏覽選項等強大功能。開發(fā)人員可以根據(jù)它的實時數(shù)據(jù)源創(chuàng)建響應(yīng)式的Web應(yīng)用程序，能輕松實現(xiàn)上千條數(shù)據(jù)的實時刷新，且性能完全不受影響。>>DXperience WPF/Silverlight下載

另外還有一個不容錯過的工具是專門針對移動設(shè)備的開發(fā)框架DevExtreme。它提供開箱即用的自適應(yīng)設(shè)備的樣式庫，開發(fā)人員可以直接進行調(diào)用，非常之方便。>>DevExtreme下載

Infragistics

很多人大概不知道，界面組件 Infragistics 內(nèi)有一個強大的支持響應(yīng)式設(shè)計的 igGrid 控件。該控件提供四種設(shè)計模式：標(biāo)準(zhǔn)（默認）、響應(yīng)式Web設(shè)計、自動隱藏的列、預(yù)定義網(wǎng)格模板。igGrid 針對屏幕的寬度提供了預(yù)定義的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。

下面是一段在移動設(shè)備上隱藏產(chǎn)品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創(chuàng)建自定義響應(yīng)式Web設(shè)計的更多資料，