适配的方法，3个步骤
适配中背景图片的处理
适配的原理解析
摘要：在进行移动端界面的书写的时候，如果把宽度高度或者字体大小全部写死的话，那么在所有手机上看到的大小都一样，存在的问题就是同样大小的字体，或者一个盒子模型，
在大屏幕手机上看起来会有点偏小。比如iphone6PLUS。如果是做成适配的话，就很好的解决了这个问题，大屏幕显示的内容大一点，小屏幕显示的小一点。
所以今天做一个移动端页面适配的小小总结
适配的要求
1、在不同分辨率的手机上，页面看起来是自适应的。整体效果看起来比较和谐。不会说大屏幕上看起来特别小。小屏幕上看起来特别大
2、主要是关注字体，宽高，间距，图片大小等。
3、所提供的设计图一般是手机分辨率的两倍，才能方便做适配。
4、使用rem做单位，而不是传统的px
适配的方法，3个步骤
步骤1：
设置viewport，也就是平时写移动端页面都要加上的：
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
步骤2：
首先我们在我们的页面引入下面的flexible.js，
这段适配的js代码是拿淘宝的来用的。
适配的js代码的github地址如下：https://github.com/amfe/lib-flexible/blob/master/src/flexible.js。
步骤3：
页面上我们的css代码可以这样写，比如设计图给我们的尺寸是750*1000的。某个容器在设计图的宽度是150px*225px,那我们在css里面
宽度：150px/750px/10=150px/75px=2rem;
高度为：225px/75px=3rem;
一句话：布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10；
div{ width: 2rem; height: 3rem; }
通过上面的3个步骤，我们就可以将我们的移动端页面做成适配的了。
css换算方法
不过有一点，一直算来算去挺烦的。所以在写css的时候，最好使用css预处理器，比如sass、less来写，这样就方便很多了。
或者在sublimeText3中安装cssREM插件，正常书写px单位，然后编辑器自动帮你换算成rem.
cssREM插件的安装教程：https://github.com/flashlizi/cssrem
注意点：
容器的宽度高度我们用rem为单位，但是字体大小font-size我们还是用px,而不是用rem
原因：
flexible.js的作者winter是这样解释的：考虑到字体的点阵信息，一般文字尺寸多会采用 16px 20px 24px等值，若以rem指定文字尺寸，会产生诸如21px，19px这样的值，会导致字形难看，毛刺，甚至黑块，故大部分文字应该以px设置。
一般标题类文字，可能也有要求随屏幕缩放，且考虑到这类文字一般都比较大，超过30px的话，也可以用rem设置字体。
下面粘贴一下flexible.js的源码：加了注释
flexible.js
;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { console.warn('将根据已有的meta标签来设置缩放比例'); var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) { var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其他设备下，仍旧使用1倍的方案 dpr = 1; } scale = 1 / dpr; } //为html标签添加data-dpr属性 docEl.setAttribute('data-dpr', dpr); if (!metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); // 动态设置meta metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } //根据dpr和物理像素设置rem function refreshRem(){ //getBoundingClientRect().width相当于物理像素 var width = docEl.getBoundingClientRect().width; // width / dpr > 540等于独立像素 if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; // 将屏幕宽度分成10份， 1份为1rem. rem转化px计算公式=d*(width/10) docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } // 监听窗口变化，重新设置尺寸 win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); // 当重新载入页面时，判断是否是缓存，如果是缓存，执行refreshRem() win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === 'complete') { doc.body.style.fontSize = 12 * dpr + 'px'; } else { doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; } })(window, window['lib'] || (window['lib'] = {}));
适配中背景图片的处理
1、如何使用background-size
因为是使用了rem来做单位，我们在写移动端的背景图的时候，一般使用background-size来控制大小，那要怎么来换算呢？
换算单位如下：
background-size=背景图的大小/该设计图的宽度*10
打个比方：我的背景图是16*18，设计图是按照640的宽度来设计的。那么我的background-size值为
background-size: 16/640*10rem 16/640*10rem 也就是 background-size:0.25rem 0.28125rem;
通过这样控制之后，我们的背景图也做到了适配的效果
2、雪碧图的适配！！！！