如何通过浏览器调整让Vue项目适配不同分辨率的显示器？

本文共计369个文字，预计阅读时间需要2分钟。

场景+Vue搭建的大屏项目，屏幕分辨率为1920x1080。现需将该项目的分辨率适配为1024x768，CSS中的px单位视为逻辑像素（Device Independent Pixel，DIP）。亦称设备独立像素（Device Independent Pixel，DIP）。

场景

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屏幕上要精细得多。

注：

霸道的程序猿 获取编程相关电子书、教程推送与免费下载。