漫談響應式設計網站

響應式設計中的界面設計

對於界面設計，咱們之前針對桌面產品的設計可能就是一個尺寸的，每一個模塊的位置比較固定，可是在響應式設計中，這些東西就改變了，設計師會根據產品 的須要設計多個版本的設計，在這些不一樣的版本中，模塊A在1024的寬度下，可能會是黑色背景，可是到了768下面可能會變成白色背景，實現了在不一樣寬度 的不一樣展示。這裏面顏色、背景、寬高等均可改變，可是有一點咱們須要注意的是 DOM 節點的順序最好保持一致，由於在響應式設計的頁面中，咱們會使用流式佈局，在固定版式經過絕對定位或者外邊距負值的方式改變DOM 順序和視覺順序的技巧，在這裏可能並不適用。

針對媒體查詢的斷點

咱們知道，咱們經過媒體查詢（Media Query）的方式改變網頁的佈局，咱們在哪些寬度下改變佈局，也就是咱們所稱做的斷點，咱們更習慣的思惟是針對某些設備（好比桌面、平板電腦、手機）的 數據來設置斷點，好比 1024 對應桌面、768對應pad、480 對應手機，但實際上，這些東西是靠不住的，由於這些屏幕尺寸會根據時代的發展不斷的變化，咱們的響應不該該只針對某些設備，咱們須要的是一個區間值，而不 是將某一分辨率對應一種設備。斷點確定是須要有的，那這些斷點是如何設置的呢？怎麼才能不是爲了斷點而斷點呢？實際上，這些斷點的設置都是根據內容的須要 作的，當咱們的內容在達到一個臨界點後，視覺效果不符合人們的審美或影響了內容獲取時，這就是咱們須要的斷點。可是咱們可能沒法在視覺設計的階段就能覆蓋 其尺寸區間內容全部情況，這樣咱們就須要把它和現有的設備相結合確立斷點。

所以，我的認爲不一樣的項目，在響應式設計中須要的斷點是不同的。咱們知道在媒體查詢中有 width 和 device-width 兩個特性，由於在手持設備中多數用到的是 webkit 內核的瀏覽器，咱們通常會經過 viewport 的屬性，將設備寬度賦予視窗的寬度

<meta name=」viewport」 content=」width=device-width,initial-scale=1, maximum-scale=1″>這樣咱們就能根據設備的寬度來對某些設備作媒體查詢了。

交互上的那些不一樣

在響應式設計中，咱們不只要考慮之前桌面用戶的使用習慣，也必須兼顧不一樣尺寸的手持設備。好比你們在PC上習慣使用的浮層在某些小尺寸的設備上就沒 法使用了，就像咱們圖中看到的。並且一些響應區域小的連接也不方便咱們使用手指來操做，所以咱們能夠作到」求同存異」。好比咱們根據屏幕的尺寸，來決定 是否使用浮層、或者增大操做區域、或者」整齊劃一」。好比在新浪視頻項目區別設備來使用浮層，將全部的連接的操做區域作成方便手指操做的大小。