FE: Responsive Web Design Overview

佈局特色

1. 單列布局 vs 水平佈局

    手機屏幕寬度較小，所以多采用單列布局。
    反觀桌面網頁設計，爲了利用寬度，每每使用各類水平佈局的組件，諸如水平導航欄，水平按鈕組，水平分頁等。然而水平佈局的組件，在移動端中，若是設備寬度不夠，會致使組件割裂換行，影響視覺效果。
    所以RWD的基本思路之一，桌面使用水平佈局，移動端使用單列布局。

    實現參考
    按鈕組    http://zrss.github.io/ResponsiveDesign/templates/rw-btn-group.html
    分頁樣式 http://zrss.github.io/ResponsiveDesign/templates/rw-pagination.html
    發佈話題 http://zrss.github.io/ResponsiveDesign/templates/rw-topic.html

2. 流式佈局 vs 固定佈局

    所謂流式佈局呢，舉個例子，就像一碗水，寬度變小了，高度就會變長。本質是百分比寬度佈局，不使用絕對定位樣式，由於使用了絕對定位，會使得元素脫離文檔流，當寬度變小，高度加長時，會遮蓋其餘處於文檔流中的元素。
    另外流式佈局須要注意桌面顯示寬度問題，在移動端中100%的寬度很合適，而在桌面上100%的寬度意義不大，甚至影響閱讀，當須要限制寬度時，能夠使用css的max-width屬性。
    固定佈局，能夠對元素的排列、位置作出精確佈置，然而當屏幕寬度小的時候，會出現水平滾動條，影響用戶體驗，這也是通常固定佈局的網頁footer提示使用大於1024*768的分辨率的緣由。
    所以RWD的基本思路之二，使用流式佈局。

    實現參考
    首頁樣式 http://zrss.github.io/ResponsiveDesign/templates/rw-navbar.html 其中的兩欄佈局

3. EM vs PX

    em和px均爲字體大小單位。
    em不是絕對單位，它是相對於當前所選擇的字體大小的單位，直觀上看，1em等於當前字體大小，如當前文檔的字體大小爲12px，1em = 12px，2em = 24px。對移動設備友好。
    px是絕對單位，它是用於屏幕媒介的固定大小單位，1px等於電腦屏幕的1點（屏幕分辨率的最小劃分）。固然因爲固定大小的性質，不能縮放，對移動設備不友好。

    實現參考
    表格樣式 http://zrss.github.io/ResponsiveDesign/templates/rw-table.html 其中的標題

4. Word wrap

    文字自動換行的問題，若是一個單詞很是長，若是不強制換行，可能會超出包含該單詞元素的邊界，影響佈局。
    使用下面的CSS代碼能夠強制換行

.front-text-break {
    word-break: break-all;
    word-wrap: break-word;
}

 

調試方法

    Chrome desktop調試頁面時，右鍵審查元素，或者按下F12，便可使用developer tools，諸如查看element、network及console；在Chrome mobile中也能夠完成相同功能，不過須要藉助Chrome desktop的幫助。
    首先，在Android手機上打開USB調試，並用usb線鏈接上電腦；其次，在Chrome desktop的地址欄中輸入about:inspect，便可檢查到鏈接手機中的Chrome mobile，此時能夠在Chrome mobile中打開想要調試的頁面，參考下圖

 點擊inspect，便可打開針對該頁面的Developer Tools，而後就能夠如同在Chrome desktop中調試頁面了

 

PS：右側紅色箭頭指向的圖標爲屏幕投影，即把手機上的視圖顯示在瀏覽器左側；

另外Chrome desktop還有device mode功能，能夠模擬頁面在不一樣手機上的顯示狀況，優勢簡單快捷，缺點並不徹底符合實際狀況。
操做步驟以下
　　1. F12 / option + command + i 呼出developer tools
　　2. 點擊Toggle Device Mode
　　3. 調整developer tools位置，使其移動到瀏覽器右側
　　4. ctrl + r / command + r 刷新頁面

Toggle Device Mode及調整Developer tools按鈕位置，參考下圖

 

完整操做過程

 

資料

http://blog.froont.com/9-basic-principles-of-responsive-web-design/ RWD 9 basic principles
http://stackoverflow.com/questions/609517/why-em-instead-of-px EM vs PX
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design RWD CSS Tricks
http://bradfrost.github.io/this-is-responsive/patterns.html RWD Patterns
http://www.lingulo.com/tutorials/css/how-to-build-a-html5-website-from-scratch Web design with sophisticated tech (fucking awesome)
http://www.smashingmagazine.com/2014/09/03/testing-mobile-emulators-simulators-remote-debugging/2/ Android and IOS Debugger

 

總結

​    第一次實現是靈感，後續實現是微創新重複。我的以爲總的思路是桌面水平，移動端垂直100%佔滿；簡化元素結構；不能寫style，用css類（用於Media Query）；浮動影響佈局時，用絕對定位。    最後我只是網絡資源的搬運工、整合人、翻譯人，RWD的實踐者，而後寫了此文，有我的看法，各類錯誤在所不免，很是歡迎糾錯、補充及交流。