現(xiàn)在電腦的分辨率很多，如1920px、1600px、1344px，網(wǎng)站在不同分辨率的表現(xiàn)是不一樣，尤其是響應(yīng)式網(wǎng)站的制作方便，需要適配不同的網(wǎng)站尺寸，那么如何調(diào)試網(wǎng)站在不同分辨率的表現(xiàn)呢？

隨著現(xiàn)代社會(huì)的快速發(fā)展，手機(jī)幾乎成了每個(gè)人不能離開(kāi)的一部分，現(xiàn)在做網(wǎng)站的時(shí)候，也會(huì)考慮到手機(jī)瀏覽的事情，所以就出現(xiàn)了一種叫響應(yīng)式的網(wǎng)站，就是在不同的分辨率的下，都能正常的顯示網(wǎng)頁(yè)，現(xiàn)在我們就討論下如何響應(yīng)式網(wǎng)站的各種分辨率的切換技巧。

我們以顯示器的分辨率1920*1080來(lái)切換各種分辨率，如下圖所示：

這種分辨率是目前比較主流的，大多數(shù)顯示器都是這種分辨率，包括幾年前的手機(jī)分辨率也是這個(gè)，但這是手機(jī)橫屏分辨率，豎屏分辨率是1080*1920，也就是寬度是1080px。由于我們前端設(shè)計(jì)師在寫(xiě)樣式的時(shí)候，都是根據(jù)顯示器(手機(jī)屏幕)的寬度來(lái)寫(xiě)代碼的，所以我們?cè)跍y(cè)試網(wǎng)頁(yè)的時(shí)候只要測(cè)試不同寬度的分辨率就可以了。
上面我說(shuō)過(guò)顯示器的分辨率寬度是1920px，那么如果我們?yōu)g覽更大的分辨率的寬度該怎么辦呢？例如現(xiàn)在已經(jīng)有大量的2560px寬度分辨率的顯示器了，但我的顯示器最大分辨率只有1920px,所以我們就要對(duì)瀏覽器進(jìn)行縮放來(lái)模擬2560px的寬度，打開(kāi)谷歌瀏覽器，如下圖所示：

點(diǎn)擊右上角的豎三點(diǎn)，將縮放從100%縮小到75%,這個(gè)由計(jì)算公式1920÷75%=2560。如果想要瀏覽更大寬度的分辨率，可以同樣的方法，我們可以將瀏覽器的百分比設(shè)為x.目前的分辨率為y，需要瀏覽的寬度為z,公式為x=y÷z，得到的x為百分比，當(dāng)然也可以出現(xiàn)z比y小的情況，這就是下面我們要說(shuō)的筆記本上的分辨率。
先來(lái)看看筆記本顯示兩張圖片：這就是1920*1080放大125%的分辨率。



其他這個(gè)顯示器的實(shí)際分辨率可以根據(jù)上面的分辨率得到z=y÷x=1536,所以前端寫(xiě)樣式的時(shí)候要注意1536px的分辨率，不能僅僅只關(guān)注1400px的分辨率，還有一種是1920放大150%，也就1280px的分辨率，與常規(guī)的筆記1366px差不多。
以上就是教你如何使用一臺(tái)顯示器瀏覽所有主流分辨率的情況，當(dāng)然要記住，不是百分百準(zhǔn)確的，如果有體驗(yàn)的好，還是要有各種分辨率的顯示器會(huì)更好些。

上面是常用的使用不同分辨率調(diào)試網(wǎng)站的方法，還有一種就是使用網(wǎng)站調(diào)試工具，如按瀏覽器的F12快捷鍵，里面可以設(shè)置分辨率。