今天小伙伴们分享了webapp的布局方案,听到了很多名词,rem、dpr、淘宝的flexible布局,虽然之前都听过,但是一直没用过,还是需要细细探究一下滴。
1、dpr是什么呢?
要弄清楚这个还需要弄清楚其他的几个名词。
1). 物理像素
一个物理像素是显示器(手机屏幕)上最小的物理显示物理单元,在操作系统的调度下,每一个设备都有自己的颜色值和亮度值。
2). 设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如:css像素),然后由相关系统转换为物理像素。
3). 设备像素比(device pixel ratio)
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系
设备像素比=物理像素/设备独立像素 (在x方向或者y方向)
2、移动端rem布局
rem是相对于根元素字体大小的单位,rem是相对于根元素<html>,也就是我们只需要在根元素确定一个px字号,则可以算出元素的宽高。
3、flexible.js
淘宝弹性布局方案