目前的(de)響應式設計一般考慮四類尺寸（寬度，高(gāo)度一般按照(zhào) 9:16 的(de)比例進行推算(suàn)，再減掉浏覽器上下(xià)的(de)導航欄高(gāo)度）：
手機：360px（5寸左右的(de)手機，最小一般兼容到320px即可(kě)，再往下(xià)的(de)機子基本都是淘汰的(de)差不多(duō)了(le)，可(kě)以不用(yòng)管了(le)）
平闆：361 - 1024 px（現在即便11寸的(de)筆記本也(yě)不大(dà)會用(yòng)到1024的(de)分(fēn)辨率了(le)，所以直接劃入平闆）主流PC顯示器：1025 - 1920 px（1080P是目前桌面顯示器的(de)主流）超清PC顯示器：1921 - 5120 px（主要考慮2K、4K、5K等超高(gāo)分(fēn)辨率，爲未來(lái)考慮）
1. 手機
響應式設計的(de)正确流程，應該是移動優先的(de)，然後逐漸放大(dà)到更大(dà)的(de)尺寸，因此應該優先設計手機端的(de)樣式，而不是設計好傳統的(de)桌面網站之後再去嘗試壓縮到手機上。至于如何設計移動Web的(de)界面這(zhè)裏就不細述了(le)，相信各位設計師朋友們都有自己的(de)創意。
2. 平闆
平闆端基本就是放大(dà)版的(de)移動端，直接照(zhào)搬即可(kě)完成75%的(de)工作，但直接照(zhào)搬的(de)話(huà)單個(gè)元素會顯得(de)太大(dà)，畢竟頁面分(fēn)辨率是之前的(de)差不多(duō) 3 倍。因此平闆端的(de)布局可(kě)以比在手機端多(duō)劃分(fēn)幾列，比如在手機端直接一個(gè) ListView 下(xià)來(lái)的(de)設計，到平闆端可(kě)以分(fēn)成 2~3 列，在手機端全屏寬度的(de)按鈕，在平闆端會顯得(de)太長(cháng)，可(kě)以考慮适當縮短，保留足夠的(de)高(gāo)度以供手指點按即可(kě)，在移動端必須要隐藏的(de)導航、菜單等可(kě)以考慮直接展示出來(lái)，以填補多(duō)出來(lái)的(de)空間。
3. 主流PC顯示器
這(zhè)個(gè)沒什(shén)麽好講的(de)，傳統的(de) Web 設計想必大(dà)家早已經輕車熟路了(le)。這(zhè)裏唯一要注意的(de)是保持布局的(de)連貫性，響應式設計的(de) PC 端是由平闆端放大(dà)和(hé)适配而來(lái)的(de)，可(kě)以展示更多(duō)的(de)内容，但不應該和(hé)平闆端差别太多(duō)，要确保用(yòng)戶能夠識别出兩者是同一個(gè)網站。
4. 超清PC顯示器
這(zhè)在過去是不需要考慮的(de)，那時(shí)候 1080P 還(hái)是個(gè)很火熱(rè)的(de)概念，1024px 還(hái)是筆記本的(de)分(fēn)辨率。但現在随著(zhe) 2K/4K 屏的(de)逐漸普及，這(zhè)部分(fēn)用(yòng)戶的(de)占比開始一點點多(duō)起來(lái)，問題逐漸凸顯，變得(de)不可(kě)忽視了(le)。沒有特别适配方案的(de)網頁在這(zhè)些環境下(xià)看起來(lái)會有兩種變化(huà)：原本适配全屏的(de)頁面會被拉伸得(de)太寬，原本固定寬度的(de)頁面兩側會留下(xià)大(dà)片的(de)空白。面對(duì)這(zhè)樣的(de)事實，需要設計師們在設計适配方案的(de)時(shí)候考慮到頁面在這(zhè)些設備上的(de)樣子。
