最近在公司寫的頁面的都是使用了響應式布局，也正是這點在設計與開發溝通上引發了許多口水，因此在設計規范上寫下幾點響應式網站設計注意事項，望共勉。

　　一、什么是響應式設計？

　　先科普一下，所謂的響應式網站就是網站頁面隨瀏覽設備的不同而自行響應，動態的調整布局結構、元素規格樣式，將相同的內容以不同的格式呈現給不同設備的用戶。效果如圖下：

　　pc端環境下效果

　　平板環境下效果

　　移動端環境下效果

　　通過以上圖片可以發現不同設備環境下網頁的布局結構是不一樣的，但內容卻不變。

　　二、注意細節

　　A、盡量避免大量使用圖片充當背景。在響應式網站上，不同設備下背景圖片適配是開發者的一個痛點。在開發原理上，前端是按比例適配圖片，那么這將出現以下三種情況：

　　1、第一種：按容器比例撐滿。

圖片看起來好像沒問題，但是在小設備環境下圖片會出現壓縮變形的情況。

　　2、第二種：圖片寬度按容器比例撐滿、高度自適應大小。

圖片看起來好像也沒有問題，同理在小設備環境下圖片底部會出現空白情況。

　　3、第三種：把背景圖片放大到適合元素容器的尺寸，圖片比例不變。

圖片看起來好像沒有問題，同理在小設備環境下超出容器的部分可能會裁掉。

　　解決方案：

　　一張背景圖片引發各種強迫癥，騷年你還敢亂用？

　　1、盡量少用圖片充當背景(這里指的是在響應式網站上)

　　2、通過調查使用裁剪這種方法比較多，設計師需要輸出不同設備下的背景圖片(pc 平板 移動端)。

　　3、可以使用背景圖片，但是背景和圖片需要分開，而且背景只能是純色調或者是有規律的圖片(這樣前端可以重復使用背景圖片。就可以避免底部出現空白的尷尬情況了)。

　　4、設計師輸出不同設備下的圖片效果(不推薦、效率低)

　　B、該顯示的顯示該隱藏的隱藏。例如導航欄，在pc端顯示上導航的存在可能沒什么，如圖2-2。但是在移動端上查看的時候，導航還是盡量隱藏起來，需要的時候再顯現。在移動端上導航可以用漢堡按鈕的形式展現。

　　C、不同設備環境下使用不同布局結構，這樣能顯示最友好的視覺效果。

　　三、使用場景

　　并不是所有網站都適合用響應式，如果用了響應式，那么移動端的UI就不能要求太高，畢竟響應式只是適配一下排版布局，排版都是按規律順序進行調整的。如果移動端UI和PC端相差太大，那還不如直接寫2套代碼性能還更好。而且，后期響應式網站維護起來也不簡單。

　　如果是單個頁面或比較少頁面的網站(網站結構不復雜的，比如官網、個人博客等)，建議做響應式；

　　反之，不建議(比如商城、社區等)。

　　四、總結

　　以上就是對響應式網站設計注意事項的一些總結，在實施上需要設計師和前端er一起探討制定規范。更多關于“UI培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業需求，更科學更嚴謹，每年培養泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。

　　注：本文部分文字和圖片來源于網絡，如有侵權，請聯系刪除。版權歸原作者所有!