** 常见大屏分辨率 **
- 1366 * 768 ： 普通液晶显示器
- 1920 * 1080： 高清液晶显示器
- 2560 * 1440： 2K高清显示器
- 4096 * 2160： 4K高清显示器
- 1280 * 720： 笔记本（1920*1080分辨率下系统默认推荐150%缩放比产生的尺寸。。。。）
设备像素
viewport： 视窗=浏览器窗口的宽高 物理像素（设备像素）： 屏幕显示分辨率像素，每个像素可以根据操作系统设置自己的颜色 和亮度 设备独立像素（dip）：密度无关像素，可以认为是计算机坐标系统中的一个点,可用于区分视网膜设备还是非视网膜设备 css像素（DIPs）： 主要用在浏览器上，一般情况下，css像素称为与设备无关的像素 屏幕密度： 设备表面上存在的像素数量（PPI） 设备像素比(dpr): 定义了物理像素和设备独立像素的对应关系，设备像素比=物理像素/设备独立像素
适配痛点
设计稿按照1920*1080的分辨率，16:9的比例设计， 实际开发中，document窗口不足16:9（高度减掉顶部tab及导航栏，地址栏等） 不同分辨率：实际应用场景中，显示场景不同，不能固定写死px单位 不同比例：不同的显示器宽高比与设计稿不一致 由于大屏数据可视化项目通常用于放在电视或广告屏上展示用，而不允许出现滚动条
关于rem
- rem (font size of the root element) , 是 css3 的引入的一个大小单位。即相对于根元素的 font-size 值的大小。所谓根元素在网页里一般就是 html.
html{
font-size:20px;
}
test1 {
width: 1.4rem; //1.4 × 20px = 28px
}
test2 {
height: 2.4rem; //2.4 × 20px = 48px
}
- 通常如果应用场景只涉及16:9比例下，1920*1080分辨率屏幕的话，使用rem来自动计算即可实现不同大小屏幕的适配
px2rem
postcss-plugin-px2rem: 作为postcss的经典插件之一，用于自动转换px为rem
一般手机端使用
适配方案
内容多的用scale 内容少的可以用rem
rem自适应缩放
在内容较小的设计大屏上，rem主要是按字体大小来定义，缺点就是没法管控页面的高度，会导致在横竖屏比例特别是超过16：9的宽屏上导致出现滚动条。
css3 缩放scale
驾驶舱等可视化大屏一般采用此种方式，， 以设计稿设计大小为标准开发，再通过屏幕大小计算整屏的缩放比例，对页面整体等比例缩放。 实际项目中，我一般都通过这种方法，优点是简单，缺点是水平或垂直空间上可能会留白，但是背景是全屏的，所以效果也不会很差。
