簡述響應(yīng)式網(wǎng)頁設(shè)計的概念及其應(yīng)用概念

　　響應(yīng)式網(wǎng)站設(shè)計是一種網(wǎng)頁網(wǎng)頁設(shè)計布局，其理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對應(yīng)的布局。

　　響應(yīng)式網(wǎng)頁設(shè)計(Responsive Web design，通常縮寫為RWD)是指：頁面的設(shè)計與開

　　發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。可以說是一種網(wǎng)頁設(shè)計的技術(shù)做法，該設(shè)計可使網(wǎng)站在多種瀏覽設(shè)備（從桌面電腦顯示器到移動電話或其他移動產(chǎn)品設(shè)備）上閱讀和導(dǎo)航，同時減少縮放、平移和滾動。

　　應(yīng)用：

　　1. 改變?yōu)g覽器大小

　　基于“響應(yīng)式內(nèi)容”的本質(zhì)，頁面應(yīng)該在任何合理屏幕大小的設(shè)備上看上去都很舒服，從300*300的手機(jī)到2550*1600像素的顯示器。最快最方便的評估響應(yīng)式功能的方式是大幅改變?yōu)g覽器的大小，檢查顯示情況。

　　對于這類測試不需要任何搭建時間。只需要打開網(wǎng)頁，點擊瀏覽器的右上角，拖拽到所需的大小。文本是否在你認(rèn)為應(yīng)該在的位置，是否仍然可讀？圖像是否能合理伸縮？控件是否還在頁面上——按鈕，文本輸入框，日期控件和其他的——是否仍然可用？它們有沒有遮蓋掉其他重要的內(nèi)容？

　　最新的IE和Chrome版本有工具可以幫助調(diào)整瀏覽器尺寸到需要的合適大小，比如移動手機(jī)或者平板。

　　2.移動設(shè)備和旋轉(zhuǎn)

　　移動設(shè)備使得響應(yīng)式網(wǎng)頁設(shè)計變得如此重要。移動設(shè)備也給響應(yīng)性帶來了一個新的要求：旋轉(zhuǎn)。這些小型設(shè)備會跟著主人去任何地方。這些設(shè)備也可以隨意旋轉(zhuǎn)，從縱向到橫向再轉(zhuǎn)回來。這似乎和改變大小很類似。但是實際上設(shè)備的每次旋轉(zhuǎn)之后，網(wǎng)頁都需要重新渲染。

　　一些應(yīng)用在改變大小時可能會改變自身行為 -- 比如，iOS7的計算器，在IPhone4的縱向模式下會隱藏科學(xué)計算選項。

　　3.響應(yīng)式檢查

　　響應(yīng)式檢查點的所有描述在網(wǎng)上都可以找到。其中的一些很簡單，告訴你在不同的瀏覽器尺寸下網(wǎng)頁看上去的樣子。更多復(fù)雜的選項，比如BrowserStack，模擬一系列可能的屏幕尺寸和橫向縱向模式切換能力的組合。這樣的可配置性和模擬尺寸交互的組合可以幫助創(chuàng)建強(qiáng)大的響應(yīng)式測試環(huán)境。

　　4.調(diào)整分辨率、觸屏和鼠標(biāo)、響應(yīng)式的圖片文字。

　　例如字體的響應(yīng)式布局是使用rpx單位(responsive pixel)，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)；相對的，屏幕分辨率、觸屏、鼠標(biāo)、圖片也可以通過相應(yīng)的單位，標(biāo)簽來實現(xiàn)。