网页单位和rem使用小结

网页尺寸单位

• 百分比（%）
• 英寸（in）
• 厘米（cm）
• 毫米（mm）
• 磅数（pt）
• 12 点活字（pc）
• 字母高度一半（ex）
• 父级字体（em）
• 像素（px）
• 根元素字体（rem）
• 相对于视窗的宽度（vw）
• 相对于视窗的高度（vh）
• 相对于视口的宽度或高度中较大的那个（vmax）
• 相对于视口的宽度或高度中较小的那个（vmin）

使用前能够在 http://caniuse.com/ 查看各个单位的浏览器兼容性

设备像素

ppi(pixels per inch)设备像素表示每英寸所拥有的像素(pixel)数目，数值越高，表明屏幕能以更高的密度显示图像。

计算公式：ppi=像素数量/物理尺寸（英寸数）

设备独立像素

dips(device-independent pixels)设备独立像素。

咱们但愿不一样屏幕显示图片的大小要一致，咱们要计算图片缩放比例。

计算公式：图片逻辑像素大小px1 / 图片缩放后实际像素大小px2 = 设备像素dp / 设备独立像素dips
 px2 = px1 * (dp / dips)
 px2 = px1 * dpr

设备像素比

dpr(devicePixelRatio)是设备像素dp和设备独立像素dips的比例。
dpr = dp / dips

css像素

css像素是一个相对单位。相对不一样屏幕，其实际像素大小不一样。
咱们定义时，是定义其逻辑像素。即该图要用多少个像素来显示。

rem

rem是什么？

rem (root element)，这个是一个相对的单位。
与em的差异在于rem相对的是根节点html的font-size,em相对的是父元素font-size。

如何优雅地使用rem

动态修改html的font-size，那么使用rem的元素的对应单位实际像素也会相应的改变，因此咱们只要写一份css就能够适配全部手机的屏幕了。虽然rem在某些浏览器下面不够精准，但那也只是少数，若是须要很是精准的适配，那么可使用js来计算html的font-size。

如今设计师给的移动端视觉稿，通常都是按照750px来设计的。当咱们拿到视觉稿时，首先把视觉稿的宽度转换为rem，咱们并不须要考虑设备的分辨率，只须要按照

计算公式：视觉稿宽度 = font-size * rem

这个公式来计算就行了。视觉稿的宽度是咱们以750px为例，font-size 与 rem 是两个变量，咱们只须要它们的乘积等于750便可。咱们采用 定一变一的方式，假定rem=7.5，那么初始值font-size就必须等于 100px，咱们就能够根据须要适配的屏幕宽度来等比例调整font-size。那么若是咱们750px的视觉稿须要显示成640px呢，咱们只须要把font-size对应的缩小就能够了。其余的各类的屏幕，只须要等比例缩放就行了。

js+sass计算方案

JS动态设置font-size（简单demo，若有须要最好加上DomContentLoaded和orientationchange的监听）：

fnResize();
window.addEventListener("resize", function() {
    fnResize()
}, false);
function fnResize(){
    var docWidth = document.documentElement.clientWidth,
            body = document.getElementsByTagName('html')[0];
    body.style.fontSize = docWidth / 32 + 'px';
}

sass:

@function rem($px){
    @return $px*(1/20)*1rem;
}

.ty_con{
    minwidth: rem(300); /* 15rem */
}

rem问题及解决方案

问题：

部分安卓机rem计算出来的font-size老是要比预期要大一些或者小一些：华为，魅族......（小数保留问题）这样会致使最后的计算是不许确的。

解决方案1:

1. 在css的使用上宽度布局尽可能使用百分比，flex和box-sizing来作，减小宽度计算偏差产生的问题。
2. icon雪碧图的图标之间留白，在写宽度的时候多写几像素使图标居中。

解决方案2:

在每次计算完页面的fontSize后，对某个实际元素的大小进行判断，若是对比原来的比例有0.2以上的出入，那就用这个比例去从新设置页面的fontSize。若是是正常状况，就不会执行页面fontSize从新这一步。至此，问题也算是解决了。

解决方案3:

直接使用Flexible实现H5的终端适配

有兴趣的小伙伴能够看下Flexible的解决方案：

使用Flexible实现手淘H5页面的终端适配： http://www.w3cplus.com/mobile...
github地址： https://github.com/amfe/lib-f...
移动端Web适配单位rem的坑你知道多少 ： http://www.jianshu.com/p/8300...
关于移动端 rem 布局的一些总结： https://segmentfault.com/a/11...