1.物理像素，设备像素和dpr设备像素比
2.弹性布局要记住3点：文字流式，控件弹性，图片等比缩放
移动适配方案：
1.通过媒体查询，对不同设备进行适配
缺陷：这样的适配只能针对一些范围的适配，对于页面不同大小的适配元素的不稳定性可能会不断增加适配元素，增加了工作量
2.rem
网易rem方案：
利用rem解决的话，需要在dom加载的时候通过js改变根元素的font-size；
设置根元素的font-size=100px：document.documentElement.style.fontsize = document.documentElement.clientWidth*6.4+"px";
当页面设备width>640，令其=640
缺陷：可能有些字体大小不能通过rem设置，需要配合媒体查询固定设置字体px来完善。
淘宝rem方案：
关键设置视口大小，达到和设计稿一致：
var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')html字体大小通过动态计算来获得：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';而元素的字体大小的，就要通过计算来获得：元素大小/html的font-size=元素的rem值注意：页面width>1080,字体大小不变缺陷：和网易一样有些大小也要通过媒体查询来设置固定值question：为啥元素尺寸可用rem而容器元素的font-size尺寸需要通过媒体查询 //定义一个变量和一个mixin @baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size .px2rem(@name, @px){ @{name}: @px / @baseFontSize * 1rem; }//使用示例：.container { .px2rem(height, 240);}//less翻译结果：.container { height: 3.2rem;} 参考：http://www.cnblogs.com/lyzg/p/4877277.html?utm_source=caibaojian.com转载于:https://www.cnblogs.com/QIQIZAIXIAN/p/7235072.html
相关资源：JAVA上百实例源码以及开源项目