网页单位和rem小分享
有哪些网页尺寸单位？
CSS 中的单位有很多种：
- 百分比（%）
- 英寸（in）
- 厘米（cm）
- 毫米（mm）
- 磅数（pt）
- 12 点活字（pc）
- 字母高度一半（ex）
- 父级字体（em）
- 像素（px）
- 根元素字体（rem）
- 相对于视窗的宽度（vw）
- 相对于视窗的高度（vh）
- 相对于视口的宽度或高度中较大的那个（vmax）
- 相对于视口的宽度或高度中较小的那个（vmin）：
查询浏览器兼容网站：http://caniuse.com/
设备像素dp(device pixels)
ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目，数值越高，代表屏幕能以更高的密度显示图像。
计算公式：ppi=像素数量/物理尺寸（英寸数）
设备独立像素dips(device-independent pixels)
可看到同一张图片在各屏幕显示大小不一。
我们希望不同屏幕显示图片的大小要一致。
我们要计算图片缩放比例。
计算公式：图片逻辑像素大小px1 / 图片缩放后实际像素大小px2 = 设备像素dp / 设备独立像素dips
px2 = px1 * (dp / dips)
px2 = px1 * dpr
设备像素比dpr(devicePixelRatio)
devicePixelRatio是设备像素dp和设备独立像素dips的比例，
也就是dpr = dp / dips
css像素
css像素是一个相对单位。
相对不同屏幕，其实际像素大小不同。
我们定义时，是定义其逻辑像素。即该图要用多少个像素来显示。
rem是什么？
rem顾名思义就是root element，这个是一个相对的单位。
与em的差别在于rem相对的是根节点html的font-size,em相对的是父元素font-size。
如何优雅地使用rem
使用rem其实是修改html的font-size，那么使用rem的元素的大小也会相应的改变，所以我们只要写一份css就可以适配所有手机的屏幕了。虽然rem在某些浏览器下面不够精准，但那也只是极少数，如果需要非常精准的适配，那么可以使用js来计算html的font-size。
现在设计师给的视觉稿，一般都是按照750px来设计的。当我们拿到视觉稿时，首先把视觉稿的宽度转换为rem，我们并不需要考虑设备的分辨率，只需要按照
计算公式：视觉稿宽度 = font-size * rem
这个公式来计算就好了。视觉稿的宽度是给定的，我们以750px为例，font-size 与rem是两个变量，我们只需要它们的乘积等于640即可。我们采用定一变一的方式，假定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的终端适配
当然还有一些其他的方案这里就不提了解决方案4，解决方案5.。。。。
有兴趣的同学可以看下Flexible的解决方案：
使用Flexible实现手淘H5页面的终端适配：
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
github地址：https://github.com/amfe/lib-flexible
移动端Web适配单位rem的坑你知道多少 ：http://www.jianshu.com/p/8300a5ec6480
关于移动端 rem 布局的一些总结：
https://segmentfault.com/a/1190000003690140
