目前的響應(yīng)式設(shè)計(jì)一般考慮四種尺寸（寬高一般是按照9:16的比例計(jì)算，然后減去瀏覽器頂部和底部導(dǎo)航欄的高度）：

手機(jī)：360px（5寸左右的手機(jī)，一般最低都兼容320px，下面的手機(jī)基本都淘汰了，不用擔(dān)心）

Tablet: 361 - 1024 px（現(xiàn)在連11寸的筆記本都不用1024分辨率了，直接賦值給平板）

主流PC顯示器：1025 - 1920 px（1080P是目前桌面顯示器的主流）

超清PC顯示器：1921 - 5120 px（主要考慮2K、4K、5K等超高分辨率，以后考慮）

1. 手機(jī)

響應(yīng)式設(shè)計(jì)的正確流程應(yīng)該是先移動(dòng)端，然后逐漸放大到更大的尺寸，所以應(yīng)該優(yōu)先設(shè)計(jì)手機(jī)端的樣式，而不是設(shè)計(jì)傳統(tǒng)的桌面網(wǎng)站，然后試圖壓縮到移動(dòng)端電話。至于如何設(shè)計(jì)手機(jī)Web界面，這里就不贅述了。相信各位設(shè)計(jì)師朋友們都有自己的想法。

2. 平板

平板端基本上就是移動(dòng)端的放大版，直接復(fù)制可以完成75%的工作，但是直接復(fù)制單個(gè)元素會(huì)顯得太大，畢竟頁(yè)面分辨率幾乎是3倍上一個(gè)。因此，平板終端的布局可以比移動(dòng)終端多分幾列。比如直接在移動(dòng)端設(shè)計(jì)一個(gè)ListView，在平板端可以分成2~3列。移動(dòng)端全屏寬度的按鈕在平板端會(huì)顯得過(guò)長(zhǎng)?？梢钥紤]適當(dāng)縮短，留出足夠的高度供手指敲擊。移動(dòng)端必須隱藏的導(dǎo)航、菜單等可以考慮直接顯示，填補(bǔ)多余的空間。

3. 主流PC顯示器

這個(gè)沒(méi)什么好說(shuō)的，傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)想必大家都很熟悉了。這里唯一要注意的是保持布局的連貫性。響應(yīng)式設(shè)計(jì)的PC端由平板端放大適配。它可以顯示更多內(nèi)容，但與平板端應(yīng)該不會(huì)有太大區(qū)別。確保用戶能夠識(shí)別出這兩個(gè)是同一個(gè)網(wǎng)站。

4. 超清PC顯示器

過(guò)去沒(méi)有考慮到這一點(diǎn)。那時(shí)候1080P還是一個(gè)很流行的概念，1024px還是筆記本的分辨率。但現(xiàn)在隨著2K/4K屏幕的逐漸普及，這部分用戶的占比開(kāi)始一點(diǎn)點(diǎn)增加，問(wèn)題逐漸凸顯，不容忽視。沒(méi)有特殊適配方案的網(wǎng)頁(yè)在這些環(huán)境下會(huì)出現(xiàn)兩種情況：原本適配全屏的頁(yè)面會(huì)被拉得太寬，原本定寬頁(yè)面的兩邊會(huì)留下一大片空白.面對(duì)這一事實(shí)，設(shè)計(jì)師在設(shè)計(jì)適配方案時(shí)需要考慮頁(yè)面在這些設(shè)備上的外觀。

我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！