场景
Vue搭建的大屏项目，设定的屏幕分辨率为1920×1080。
现需要将该项目适配分辨率为1024×768的分辨率
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、我本机是1920×1080的分辨率，怎么模拟调试1024×768的分辨率。
运行项目，在谷歌浏览器中打开调试，然后缩放窗体，查看右上角的大小显示
然后就可以调整成对应的大小，进而调整代码中css的px大小，直到达到想要的效果。
2、示例
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136147.html
