一.移動優先

　　手機設計稿通常更為簡約，由手機設計稿開始制作簡單版本，隨著平板和桌面的引入，頁面慢慢復雜，這是一個遞增的過程，前期把精力放到核心模塊上，默認打開簡潔的手機樣式，而負責的樣式包裹在media query中，所以不會加載，這樣訪問速度是最佳的

　　.content {

　　/*basic effects designed for mobile devices*/

　　}

　　@media screen and (min-width: 400px) {

　　/*complicate effects for pc and etc*/

　　/*such as loading big image and adding mouse effects when using pc*/

　　}

　　舉例：移動端采用上下排列布局，這是div自身特性，不需要設置css，而電腦端再設置布局

　　註意：通常推薦在已有樣式表中使用@media，避免額外的http請求

　　斷點：按照內容設置斷點而不是設備，不斷擴大頁面，直到原有的樣式無法滿足設計，此時設置斷點

二.彈性布局、彈性媒介與視窗

　　流體網格布局，同時針對圖片，視頻，Flash等，特別設置，簡單方法自然是：max-width:100%;，同時兼顧flex布局和相對大小單位em，rem，以上都是針對布局的

　　還有一大問題在於viewport，設置width=device-width，可指示網頁與屏幕寬度進行匹配？？？

響應式網站設計 - 最佳實踐