響應式網站設計尺寸該怎么做？

時間：2024-02-08 03:55:01 | 來源：網站運營

時間：2024-02-08 03:55:01 來源：網站運營

響應式網站設計尺寸該怎么做？：最近在公司寫的頁面的都是使用了響應式布局，也正是這點在設計與開發(fā)溝通上引發(fā)了許多口水，因此在設計規(guī)范上寫下幾點響應式網站設計注意事項，望共勉。

一、什么是響應式設計？

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

通過以上圖片可以發(fā)現(xiàn)不同設備環(huán)境下網頁的布局結構是不一樣的，但內容卻不變。

二、注意細節(jié)

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

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

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

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

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

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

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

解決方案：

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

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

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

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

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

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

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

三、使用場景

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

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

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

四、總結

以上就是對響應式網站設計注意事項的一些總結，在實施上需要設計師和前端er一起探討制定規(guī)范。

最后推薦一套UI設計視頻教程，包含PS+AI+C4D+平面設計+UI設計等，建議收藏！

如有幫助，麻煩關注、點贊喲！