现在的移动设备种类繁多，导致需要针对不同的尺寸进行适配。
可以使用媒体查询的方式，但是媒体查询的方式因为有跨度,与dpr的不同所以会有误差。
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
本文主要讲的不是媒体查询的方式，主要是根据dpr计算得到font-size的值。
下面的iphone的尺寸表格
设备具有逻辑分辨率和设备分辨率，
设备像素比（dpr）= 设备分辨率/逻辑分辨率
dpr越大说明越清晰，因为它能显示的基本单位更小
移动端适配的话，我们使用的单位是rem，所以需要根据不同的设备和不同的dpr计算出rem的基准值。
css
实践：
一般情况下，UI出的图都是按照设备分辨率出的图，比如我们拿到的设计图的视觉稿是按照iphone7来设计的，也就是750*1334 dpr=2
所以根据上面的方法rem = docEl.clientWidth * dpr / 10; 可以得到rem=75，有必要说明一下clientWidth指的是逻辑分辨率的宽度，
实践延伸
但是当你在初始页面设置了initial-scale后，clientWidth和初始的时候不一样，比如initial-scale=0.5,clientWidth会变成750（375/0.5），所以有必要初始的时候设置initial-scale=1
对于scale而言
visual viewport宽度 = ideal viewport宽度 / 当前缩放值
当前缩放值 = ideal viewport宽度（设备的宽度） / visual viewport宽度(可视区域的宽度)
现在再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是1，因为当 initial-scale = 1 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport宽度一般都是980啊，1024啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的，所以 initial-scale的默认值肯定不是1。
根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale这个值，以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度
如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的，所以会出现滚动条。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事
回到我们的实践中
此时我们可以在sass中写一个px2rem的方法，这样就不用每次手算了
$first-yellow: 75
@function px2rem($px) {
@return ($px / 15) * 1rem
}
视觉稿上有个div量出来是750px*300px，我们的样式就可以这样写
div{
width: px2rem(750);
height: px2rem(300)
}
这样计算出来的单位就是rem了，就可以适配所有的设备了，该元素在视觉稿上面占有什么样的比例，在所有设备上都会是一样，可以利用数学公式推导一番,
现在有两台设备，我们的视觉稿是按照设备1设计的，我们可以看看在设备2上面元素的所占比例与设备1是否一样
设备1相关参数
设备分辨率：dw1
逻辑分辨率：lw1
设备2相关参数
设备分辨率：dw2
逻辑分辨率：lw2
现在有某元素宽为x,在设备1上所占的比例应为x/dw1(因为UI是按照设备分辨率设计的)
对于设备1
dpr1 = dw1/lw1
按照rem = clientWidth * dpr / 10 得到 rem1 = lw1*dpr1/10 = lw1*(dw1/lw1)/10 = dw1/10
所以算出来width: x/rem1 + 'rem' 也就是width: 10*x/dw1 +'rem'
对于设备2
dpr2 = dw2/lw2
按照rem = clientWidth * dpr / 10 得到 rem2 = lw2*dpr2/10 = lw2*(dw2/lw2)/10 = dw2/10
可以得到在设备2上面元素显示的width为 样式里面写的值*设备2的rem,也就是
(10*x/dw1)*(dw2/10) = x*dw2/dw1
在设备2上面的所占的比例就是 显示的宽度/设备2的宽度
所以rate = (x*dw2/dw1)/dw2 = x/dw1 也就是设备1上所占的比例，所以他们的展示样式是一样的
ps:记得有文字的地方一定要设置font-size，不然会继承html根元素的，就会显得很大,对于文字大小的适配不建议使用rem,可以使用媒体查询
div{
font-size: 40px;
-webkit-transition:font-size 0.2s ease-out;
}
@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}
@media only screen and (max-width: 900px) { div{ font-size: 36px; }}
@media only screen and (max-width: 800px) { div{ font-size: 35px; }}
@media only screen and (max-width: 700px) { div{ font-size: 34px; }}
@media only screen and (max-width: 600px) { div{ font-size: 33px; }}
@media only screen and (max-width: 500px) { div{ font-size: 32px; }}
@media only screen and (max-width: 400px) { div{ font-size: 31px; }}
@media only screen and (max-width: 300px) { div{ font-size: 30px; }}
写文章是为了更好的总结，不总结就会忘记。
参考自：
从设备像素比到移动适配
http://blog.csdn.net/u012402190/article/details/70172371