如何設計響應式網站？
來源：尚品中國|
類型：網站百科|
時間：2018-06-01
目前的響應式設計一般考慮四類尺寸（寬度，高度一般按照 9:16 的比例進行推算，再減掉瀏覽器上下的導航欄高度）：
- 手機：360px（5寸左右的手機，最小一般兼容到320px即可，再往下的機子基本都是淘汰的差不多了，可以不用管了）
- 平板：361 - 1024 px（現在即便11寸的筆記本也不大會用到1024的分辨率了，所以直接劃入平板）
- 主流PC顯示器：1025 - 1920 px（1080P是目前桌面顯示器的主流）
- 超清PC顯示器：1921 - 5120 px（主要考慮2K、4K、5K等超高分辨率，為未來考慮）
1. 手機
響應式設計的正確流程，應該是移動優先的，然后逐漸放大到更大的尺寸，因此應該優先設計手機端的樣式，而不是設計好傳統的桌面網站之后再去嘗試壓縮到手機上。至于如何設計移動Web的界面這里就不細述了，相信各位設計師朋友們都有自己的創意。
2. 平板
平板端基本就是放大版的移動端，直接照搬即可完成75%的工作，但直接照搬的話單個元素會顯得太大，畢竟頁面分辨率是之前的差不多 3 倍。因此平板端的布局可以比在手機端多劃分幾列，比如在手機端直接一個 ListView 下來的設計，到平板端可以分成 2~3 列，在手機端全屏寬度的按鈕，在平板端會顯得太長，可以考慮適當縮短，保留足夠的高度以供手指點按即可，在移動端必須要隱藏的導航、菜單等可以考慮直接展示出來，以填補多出來的空間。
3. 主流PC顯示器
這個沒什么好講的，傳統的 Web 設計想必大家早已經輕車熟路了。這里唯一要注意的是保持布局的連貫性，響應式設計的 PC 端是由平板端放大和適配而來的，可以展示更多的內容，但不應該和平板端差別太多，要確保用戶能夠識別出兩者是同一個網站。
4. 超清PC顯示器
這在過去是不需要考慮的，那時候 1080P 還是個很火熱的概念，1024px 還是筆記本的分辨率。但現在隨著 2K/4K 屏的逐漸普及，這部分用戶的占比開始一點點多起來，問題逐漸凸顯，變得不可忽視了。沒有特別適配方案的網頁在這些環境下看起來會有兩種變化：原本適配全屏的頁面會被拉伸得太寬，原本固定寬度的頁面兩側會留下大片的空白。面對這樣的事實，需要設計師們在設計適配方案的時候考慮到頁面在這些設備上的樣子。
來源聲明：本文章系尚品中國編輯原創或采編整理，如需轉載請注明來自尚品中國。以上內容部分(包含圖片、文字)來源于網絡，如有侵權，請及時與本站聯系（010-60259772）。
推薦新聞
更多行業-
建設醫療行業網站如何進行網絡營銷？
現在普遍人們生病之后第一反應就是去搜索相應的癥狀，所以醫療行業的競爭現...
2020-05-01 -
自助建站與專業建站的區別
目前國內領先的有土豆、優酷、酷六、56等網站,首頁主要考慮了網站的導航...
2012-09-07 -
php網站制作有哪些好處？
跨平臺兼容性： PHP是一種跨平臺的腳本語言，可以在多種操作系統上運行...
2023-08-11 -
網站制作中如何做好網站關鍵詞篩選
在 SEO 優化過程中，一般情況下 SEOer 們都會選擇一些最熱門的...
2012-07-21 -
簽約北京協和洛克生物技術有限責任公司項目
北京協和洛克生物技術有限責任公司的前身是北京協和洛克生物技術研究開發中...
2017-07-28 -
網站建設通過免費軟件可以完成嗎？
當下市場的智能軟件數量非常多，以往如果要進行網站建設的話，肯定是要交給...
2022-11-10
如果您的網站可以增加轉化次數并提高客戶滿意度，該怎么辦？
預約專業咨詢顧問溝通！
Copyright ? 2025 恒久尚品 版權所有 | 京ICP備09066521號
| 公安機關備案號:11011502003910
免責聲明
誠信企業
尚品專注高端網站建設，系統平臺開發，微信小程序及APP開發服務
尚品專注高端網站建設，系統平臺開發，微信小程序及APP開發服務
免責聲明
非常感謝您訪問我們的網站。在您使用本網站之前，請您仔細閱讀本聲明的所有條款。
1、本站部分內容來源自網絡，涉及到的部分文章和圖片版權屬于原作者，本站轉載僅供大家學習和交流，切勿用于任何商業活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關法律法規，當本聲明與國家法律法規沖突時，以國家法律法規為準。
4、如果侵害了您的合法權益，請您及時與我們,我們會在第一時間刪除相關內容!
聯系方式：010-60259772
電子郵件：394588593@qq.com
