显示器像素
1.物理像素(设备像素)–显示器上最小的物理单元,由主机控制,显示不同的色值和亮度。
2.设备独立像素(css像素)–每个css像素属于虚拟像素,由系统转换控制不定数量的物理像素响应。
3.设备像素比(dpr)–物理像素 / 设备独立像素
像素关系
Iphone6为例:
图中所示,一个小方块为1个物理像素,左图设备像素比(dpr)为1,也就是1px等于1个小方块,右图设备像素比(dpr)为2,也就是1px等于2个小方块。
css的2px,在左图中占据4个格子,在右图中占据16个格子,左右总面积相等,所以右图中显示的更加清楚。
em
em是css2时推出的相对单位,相对于父级元素的字体大小比值,浏览器默认font-size:16px,这时1em等于16px。
当前元素设置font-size时,当前元素其他css属性使用到em时,都是相对于当前元素的font-size进行比值,
比如父级元素font-size:24px;当前元素font-size:16px;那么当前元素设置的margin:1em;相当于margin:16px;并不等于24px。
em总是相对于父级元素字体大小比值,这就导致每一层级的font-size若不是1em,就会影响子集元素的em比值。
比如父级元素font-size:16px;当前元素的设置font-size:1.2em;就等于19.2px;子元素设置font-size:1.2rem就等于23.04px。
rem
rem是css3推出的相对单位,相对于根元素(html根标签)字体大小适配,浏览器默认font-size:16px;这时1rem等于16px。
rem做适配主要是通过改变html标签的font-size,从而达到控制全部以rem为单位的元素大小。
rem适配
以下为rem适配代码
//designWidth为设计图宽度,为设备独立像素值(css像素)
(function (designWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
//获取html元素宽度,也就是浏览器宽度,也就是css像素
var width = docEl.getBoundingClientRect(