不久之前，設計師真的不需要擔心網(wǎng)站在手機和平板電腦上的外觀。手機尚未真正可以用于網(wǎng)絡瀏覽，在iPad之前，平板電腦更是新穎而不是必不可少的。顯然一切都已改變，大多數(shù)技術專家預測，在未來幾年內(nèi)，移動瀏覽將取代臺式機瀏覽成為查看網(wǎng)站的主要方式，這很可能會早于而不是晚。
隨著屏幕尺寸和設備（包括視頻游戲機和互聯(lián)網(wǎng)電視）的不斷發(fā)展，舊的網(wǎng)站設計方式已完全無法滿足任務。隨著企業(yè)意識到有必要優(yōu)化移動用戶的在線體驗，那些不適應的設計師將被甩在后面。響應式網(wǎng)站設計將取代傳統(tǒng)的網(wǎng)站設計。本期尼 ** 網(wǎng)設計Angle就為大家好好聊聊什么叫響應式網(wǎng)站設計。
響應式網(wǎng)站設計
響應設計的主要組成部分
這就是響應式網(wǎng)站設計的用武之地，其內(nèi)容或布局可自動適應查看其屏幕的大小。從根本上講，響應式網(wǎng)站設計的三個主要元素是靈活的網(wǎng)格，靈活的圖像和Media Queries，后者是CSS3的一部分。
1、柔性網(wǎng)格
柔性網(wǎng)格基本上是主題和模板，其中設計元素以百分比而非像素設置。以百分比為度量單位，這意味著設計為50％的元素將始終占據(jù)屏幕的一半，而不管屏幕的大小。
2、靈活的圖像
從本質上講，這意味著如果元素大于其容器，則規(guī)則會強制其匹配該容器的寬度。而且由于現(xiàn)代瀏覽器會按比例調整圖像大小，因此圖像長寬比也得以保留。而且100％規(guī)則也可以用于幾乎所有其他元素，例如嵌入式視頻。
3、媒體查詢
自從CSS 2.1中引入“媒體類型”以來，樣式表已經(jīng)包含了更多移動設備和其他設備。媒體類型實質上允許樣式針對特定類型的網(wǎng)站設備，這些類型包括手持設備，屏幕和電視。但是由于設備之間幾乎沒有標準化，設備制造商也很少提供支持，因此媒體類型永遠無法發(fā)揮其潛力。媒體查詢不但可以發(fā)揮這種潛力，還可以發(fā)揮一些潛力。但是媒體查詢不是像媒體類型那樣關心設備的類型，而是關注設備的功能。
4、不僅僅是分辨率
但是分辨率絕不是可以通過使用媒體查詢來控制的唯一設計元素。瀏覽器窗口的寬度和高度，橫向和縱向，甚至布局是可以設置的其他一些參數(shù)。例如，如果“媒體查詢”檢測到設備是智能手機，則可能會加載在計算機屏幕上顯示三列帶有文本區(qū)域和兩個垂直側邊欄的設計，而可能會在智能手機屏幕上加載為全角文本區(qū)域，并帶有兩個側邊欄作為下方的水平元素。
5、靈活的心態(tài)
靈活設計的關鍵要求是具有靈活設計思想的設計師。不幸的是，大多數(shù)網(wǎng)頁在移動設備上仍然不是那么友好，這主要是因為大多數(shù)設計人員通常還是將智能手機和平板電腦設計用于臺式機。很少有設計師會考慮多個平臺來進行設計。將媒體查詢合并到樣式表中存在一個學習曲線，但這是從使用像素進行設計到使用百分比進行設計的過渡，這使某些網(wǎng)站設計師停止了。實際上，按百分比進行設計實際上并沒有太大差異，而且也更容易。例如，考慮將100％和100像素的寬度分配給兩個相同的元素之間的差異?？傊梢源_保該元素將填充屏幕，無論是臺式機，筆記本電腦還是iPhone的屏幕。但是寬度為100像素的元素在480像素的iPhone屏幕上會很大，而在分辨率為1600×900的臺式機屏幕上會很小。
對于企業(yè)而言，實施響應式網(wǎng)站設計的主要原因很明顯。潛在客戶越容易導航并找到他們想要的東西，轉換率就越高。但是對于許多設計師而言，針對企業(yè)網(wǎng)站的響應式設計通常意味著僅縮小內(nèi)容的大小以適合較小的屏幕。任何花時間瀏覽，放大和縮小以查找所需信息的人都知道，微型網(wǎng)站不是解決方案。企業(yè)和設計師處理移動設備設計問題的另一種方法是為不同的設備創(chuàng)建單獨的站點，并根據(jù)設備自動重定向。這樣可以提供最佳的界面，并避免由JavaScript和大圖像引起的緩慢加載。但是這種方法有很多缺點，當然其中一個缺點是創(chuàng)建和維護多個站點以及在這些站點之間協(xié)調內(nèi)容的開銷。當有新設備問世時，還有另一個新站點要建立。幸運的是，如果正確完成，響應式網(wǎng)站設計可以解決移動設備設計中的幾乎所有問題。
聲明：該文觀點僅代表作者本人，搜狐號系信息發(fā)布平臺，搜狐僅提供信息存儲空間服務。