場(chǎng)景

Vue搭建的大屏項(xiàng)目，設(shè)定的屏幕分辨率為1920x1080。

現(xiàn)需要將該項(xiàng)目適配分辨率為1024x768的分辨率

?CSS中的px稱為邏輯像素 ：

也叫設(shè)備獨(dú)立像素（Device Independent Pixel, DIP），可以理解為反映在CSS代碼里的像素點(diǎn)數(shù)。

屏幕的分辨率是物理像素：

設(shè)備屏幕實(shí)際擁有的像素點(diǎn)。比如iPhone 6的屏幕在寬度方向有750個(gè)像素點(diǎn)，高度方向有1334個(gè)像素點(diǎn)，所以iPhone 6總共有750*1334個(gè)物理像素。

兩者之間是通過一個(gè)DPR來聯(lián)系的，DPR = 物理像素 / 邏輯像素

以前，CSS里寫個(gè)1px，屏幕就給你渲染成1個(gè)實(shí)際的像素點(diǎn)，DPR= 1

Retina技術(shù)用4個(gè)乃至更多物理像素來渲染1個(gè)邏輯像素，同樣的CSS代碼設(shè)置的尺寸，

在Retina和非Retina屏幕上看起來大小是一樣的，但在Retina屏幕上要精細(xì)得多。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、我本機(jī)是1920x1080的分辨率，怎么模擬調(diào)試1024x768的分辨率。

運(yùn)行項(xiàng)目，在谷歌瀏覽器中打開調(diào)試，然后縮放窗體，查看右上角的大小顯示

然后就可以調(diào)整成對(duì)應(yīng)的大小，進(jìn)而調(diào)整代碼中css的px大小，直到達(dá)到想要的效果。

2、示例

?

?

總結(jié)

以上是生活随笔為你收集整理的Vue项目借助浏览调整适配显示器的分辨率的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。