网页尺寸单位百分比(%)英寸(in)厘米(cm)毫米(mm)点(pt)12点活字(pc)半字高(ex)父字体(em)像素(px)根元素字体(rem)相对于视口宽度(vw)相对于视口高度(vh)相对于视口宽度或高度(vmax)相对于视口宽度或高度(vmin)中较小的可以查看在http://caniuse.com/使用前。每个单元的浏览器兼容性。设备像素ppi（pixelsperinch）设备像素表示每英寸的像素数，数值越大，画面密度越高。计算公式：ppi=像素数/物理尺寸（英寸）device-independentpixelsdips（设备无关像素）device-independentpixels。我们希望在不同屏幕上显示的图片大小是一样的，需要计算图片的缩放比例。计算公式：图像逻辑像素大小px1/图像缩放后实际像素大小px2=设备像素dp/设备独立像素dipspx2=px1*(dp/dips)px2=px1*dpr设备像素比dpr(devicePixelRatio)为设备像素dp与设备无关的像素下降的比率。dpr=dp/dipscsspixel像素是css的一个相对单位。实际像素大小因屏幕不同而异。当我们定义时，我们定义它的逻辑像素。即用多少像素来显示图像。什么是remrem？rem（根元素），这是一个相对单位。与em的区别在于rem是相对于根节点html的font-size，而em是相对于父元素的font-size。如何优雅的使用rem动态修改html的font-size，那么使用rem的元素对应单位的实际像素也会随之改变，所以我们只需要写一个css就可以适配所有手机的屏幕.rem虽然在某些浏览器下不够准确，但也只是少数。如果需要非常精确的适配，可以使用js计算html的font-size。现在设计师给的移动端视觉稿一般都是按照750px来设计的。当我们得到视觉稿时，首先将视觉稿的宽度转换为rem，我们不需要考虑设备的分辨率，我们只需要根据公式计算即可：视觉稿宽度=字体大小*rem.以mockup的宽度为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);functionfnResize(){vardocWidth=document.documentElement.clientWidth,body=document.getElementsByTagName('html')[0];body.style.fontSize=docWidth/32+'px';}sass:@functionrem($px){@return$px*(1/20)*1rem;}.ty_con{minwidth:rem(300);/*15rem*/}rem问题及解决问题：部分Android机器通过rem计算出来的font-size总是比预期的大或者小：华为，魅族...（十进制保留问题）这样会导致最后计算不准确。方案一：在css的使用中，宽度布局尽量使用percentages、flex、box-sizing，减少宽度计算错误带来的问题。在iconspriteimage中icon之间留一个空白，写width的时候多写几个pixels让icon居中。方案二：每次计算完页面的fontSize后，再判断一个实际元素的大小。如果与原来的比例相差超过0.2，则使用这个比例重新设置页面的fontSize。如果正常，页面fontSize就不会再执行了。至此，问题已经解决。方案三：直接使用Flexible实现H5端适配有兴趣的朋友可以看看Flexible的方案：使用Flexible实现手机淘宝H5端适配：http://www.w3cplus.com/mobile。..github地址：https://github.com/amfe/lib-f...rem的坑你知多少，移动web适配单元：http://www.jianshu.com/p/8300...关于移动端rem布局的一些总结：https://segmentfault.com/a/11...
