css适配移动端flex css sprite rem

适配和兼容性问题？这个比较重要

css篇
● 识别各种端
○ meta
■
● h5 css3新特性
○ max-width
○ @media screen and (max-width: 650px)
■ 不同规格下使用
● 长度单位适配使用
○ em
■ em ：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
em 特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

  ○ rem
      ■ rem ：是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。

这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
○ px
■ 常用的单位
○ pt
■ 打印的时候使用的单位
● 使用模板 不同分别率
○ 模板
■ boostrap
■ YUI
■ 妹纸UI
■ pureUI
● 使用flex布局
○ https://github.com/amfe/lib-flexible/blob/master/src/flexible.js。
○ 阮一峰flex教程
javascript篇
● 具体的步骤（http://www.cnblogs.com/xianyulaodi/p/5533201.html）
a. 设置viewport
i.
b. 引入flex
i. https://github.com/amfe/lib-flexible/blob/master/src/flexible.js。
c. 设置css rem布局
i. 各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10；
ii. 当然这样计算十分麻烦
1. 所以我们使用less，sass
2. 或者再安装cssREM插件
iii. 容器的宽度高度我们用rem为单位，但是字体大小font-size我们还是用px,而不是用rem

  ○ 适配中处理图片问题
      ■ css sprite
          ● 主要是background-size&&background的配置
      ■ background-size=背景图的大小/该设计图的宽度*10
          ● 我的背景图是16*18，设计图是按照640的宽度来设计的。那么我的background-size值为
      ■ background-size: 16/640*10rem 16/640*10rem   也就是 background-size:0.25rem 0.28125rem;

我们来看看适配的原理：
● 设备独立像素(density-independent pixel)
● 设备像素比 = 物理像素 / 设备独立像素
● 动态设置html的font-size，html元素的font-size的计算公式，font-size = deviceWidth / 10。
● 其实flexible的实质就干了以下几件事
1、动态改写meta标签
2、给元素添加data-dpr属性，并且动态改写data-dpr的值。也就是动态改写dpr
3、给元素添加font-size属性，并且动态改写font-size的值