前端屏幕适配

屏幕适配，一直是作为一个前端开发始终逃不掉的问题，这个话题可以追溯到最开始的PC端浏览器的不同分辨率，再到移动端不同的屏幕尺寸，一直伴随着前端工程师的日常的页面开发工作。所谓屏幕适配，可以理解为一个网页元素或者网页布局，在不同尺寸，分辨率等场景下，如何呈现最佳的效果。

造个轮子给自己看。。。
移动web必会技能–屏幕适配（物理像素CSS像素）
前端响应式布局原理与方案（详细版）
浅谈-web屏幕适配的解决方案
一个讲的比较详细的例子，可以深入学习总结一下：大屏数据可视化——屏幕适配方案(多分辨率下）

1 基本概念

1.1 常见大屏分辨率

• 1366 * 768 ： 普通液晶显示器
• 1920 * 1080： 高清液晶显示器
• 2560 * 1440： 2K高清显示器
• 4096 * 2160： 4K高清显示器
• 1280 * 720： 笔记本（1920*1080分辨率下系统默认推荐150%缩放比产生的尺寸。。。。）

补充：屏幕分辨率查看方法：在桌面右键，选择 “显示设置” ，在显示分辨率处查看，如下图所示。

2. 设备像素

• viewport： 视窗=浏览器窗口的宽高
• 物理像素（设备像素）： 屏幕显示分辨率像素，每个像素可以根据操作系统设置自己的颜色 和亮度
• 设备独立像素（dip）：密度无关像素，可以认为是计算机坐标系统中的一个点,可用于区分视网膜设备还是非视网膜设备
• css像素（DIPs）：主要用在浏览器上，一般情况下，css像素称为与设备无关的像素
• 屏幕密度： 设备表面上存在的像素数量（PPI）
• 设备像素比(dpr)：定义了物理像素和设备独立像素的对应关系，设备像素比=物理像素/设备独立像素

3. CSS长度单位

待更新