場景

Vue搭建的大屏項目，設定的屏幕分辨率為1920x1080。

現需要將該項目適配分辨率為1024x768的分辨率

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

也叫設備獨立像素（Device Independent Pixel, DIP），可以理解為反映在CSS代碼里的像素點數。

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

設備屏幕實際擁有的像素點。比如iPhone 6的屏幕在寬度方向有750個像素點，高度方向有1334個像素點，所以iPhone 6總共有750*1334個物理像素。

兩者之間是通過一個DPR來聯系的，DPR = 物理像素 / 邏輯像素

以前，CSS里寫個1px，屏幕就給你渲染成1個實際的像素點，DPR= 1

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

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

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、我本機是1920x1080的分辨率，怎么模擬調試1024x768的分辨率。

運行項目，在谷歌瀏覽器中打開調試，然后縮放窗體，查看右上角的大小顯示

然后就可以調整成對應的大小，進而調整代碼中css的px大小，直到達到想要的效果。

2、示例

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。