學學習網 手機版

學學習網

學習路徑: 學習首頁 > web開發 > CSS3 >

響應式網站如何開發

設置字體:
----------------------------------
1. 什么是響應式設計
首先大家先了解一下響應,然后再講一下設計,響應就是我發出的請求能得到什么樣子的回復,比如我說 “你好”,你會很容易的給我回復”你好”。舉這一個例子,我的應答對象就相當于我們要講的響應式的設備,他必須能夠解析 我發給他的需求。然后咱們再講一下設計,設計的官方解釋是這樣的:
1.設下計謀。
2.根據一定要求﹐對某項工作預先制定圖樣﹑方案。
3.指搞設計工作的人。
直白的講,設計其實就是設了一個計,來完成我們的需要的工作目標。
從前面我們講的響應可以看到,響應是雙方的,是互動的過程,在這個過程中我們要考慮雙方的承受能力,比如我們總不能讓小孩子扛大包。在咱們網頁設計 方面就是咱們要考慮設備的性能,從網速、Dom 節點數量、屏幕的大小等等,如果我們從前后端結合,對小孩子給糖果,給苦力大包,那樣就做到了響應式。
但是,我下面講的響應式是狹隘的,我們只是從 Web Builder 這一層做到了響應式。

2.響應式設計中的界面設計
對于界面設計,我們以前針對桌面產品的設計可能就是一個尺寸的,每個模塊的位置比較固定,但是在響應式設計中,這些東西就改變了,設計師會根據產品 的需要設計多個版本的設計,在這些不同的版本中,模塊A在1024的寬度下,可能會是黑色背景,但是到了768下面可能會變成白色背景,實現了在不同寬度 的不同展現。這里面顏色、背景、寬高等都可改變,但是有一點我們需要注意的是 DOM 節點的順序最好保持一致,因為在響應式的頁面中,我們會使用流式布局,在固定版式通過絕對定位或者外邊距負值的方式改變DOM 順序和視覺順序的技巧,在這里可能并不適用。

3.針對媒體查詢的斷點
我們知道,我們通過媒體查詢(Media Query)的方式改變網頁的布局,我們在哪些寬度下改變布局,也就是我們所稱作的斷點,我們更習慣的思維是針對某些設備(比如桌面、平板電腦、手機)的 數據來設置斷點,比如 1024 對應桌面、768對應pad、480 對應手機,但實際上,這些東西是靠不住的,因為這些屏幕尺寸會根據時代的發展不斷的變化,我們的響應不應該只針對某些設備,我們需要的是一個區間值,而不 是將某一分辨率對應一種設備。斷點肯定是需要有的,那這些斷點是如何設置的呢?怎么才能不是為了斷點而斷點呢?實際上,這些斷點的設置都是根據內容的需要 做的,當我們的內容在達到一個臨界點后,視覺效果不符合人們的審美或影響了內容獲取時,這就是我們需要的斷點。但是我們可能無法在視覺設計的階段就能覆蓋 其尺寸區間內容所有狀況,這樣我們就需要把它和現有的設備相結合確立斷點。
因此,個人認為不同的項目,在響應式設計中需要的斷點是不一樣的。我們知道在媒體查詢中有 width 和 device-width 兩個特性,因為在手持設備中多數用到的是 webkit 內核的瀏覽器,我們一般會通過 viewport 的屬性,將設備寬度賦予視窗的寬度
<meta name=”viewport” content=”width=device-width,initial-scale=1, maximum-scale=1″>這樣我們就能根據設備的寬度來對某些設備做媒體查詢了。
@media screen and (max-device-width:480px){ selector{ } }

4.交互上的那些不同
在響應式設計中,我們不僅要考慮以前桌面用戶的使用習慣,也必須兼顧不同尺寸的手持設備。比如大家在PC上習慣使用的浮層在某些小尺寸的設備上就沒 法使用了。而且一些響應區域小的鏈接也不方便我們使用手指來操作,因此我們可以做到”求同存異”。比如我們根據屏幕的尺寸,來決定 是否使用浮層、或者增大操作區域、或者”整齊劃一”。

5. 具體項目開發流程

5-1. 產品策略與信息架構
在我們介入具體項目開發流程前,我們應該已經確認了自己產品所面向的內容消費群體,以及潛在目標用戶,比如簡單的只面向小屏幕的移動用戶群或者我們要囊括所有的顯示設備(mobile、pad、pc等等)。
當我們確定目標用戶的內容消費習慣的同時,我們應該也對他們的訪問習慣、時段等等做一些初步分析。這不僅僅面向一個響應式站點,這對產品定位到開發都有決策作用。
----------------------------------
  • 學學習
  • 需幫助 請留言
課程列表
重點難點
贊助鏈接
羽毛球世界排名