移动端接触的一些知识

　　一在做移动端的时候，经常接触到devicePixelRatio这个单词，这个单词的定义就是：

　　　　window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

　　公式就是：

　　　　window.devicePixelRatio = 物理像素 / dips；

　　小结论：

　　　　当页面设置了<meta name="viewport" content="width=device-width">时候，document.documentElement.clientWidth在大部分浏览器下，得到的是布局视区的宽度，等同于dips的宽度。

　　　　①在ios设备中，window.screen.width返回的是dips宽，因此，在竖着显示的时候，视网膜显示屏的ipad和非视网膜显示屏的ipad返回的都是768.

　　　　　　screen.width乘以devicePixelRatio得到的是物理像素值。

　　　　②在安卓设备中，window.screen.width返回的是物理像素宽度。

　　　　　　screen.width除以devicePixelRatio得到的是设备独立像素(dips)值。

　　　　③devicePixelRatio在大多数浏览器是值得信赖的。

　　二

　　移动端字体单位font-size选择px还是rem
　　对于只需要适配手机设备，使用px即可
　　对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
　　rem配置参考：
　　　　html {font-size:10px}
　　　　@media screen and (min-width:480px) 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) and (max-width:959px) {
    　　　　　　html {
        　　　　　　font-size: 25px
    　　　　　　}
　　　　}
　　　　@media screen and (min-width:960px) and (max-width:1079px) {
    　　　　　　html {
        　　　　　　font-size: 30px
    　　　　　　}
　　　　}
　　　　@media screen and (min-width:1080px) {
    　　　　　　html {
        　　　　　　font-size: 32px
    　　　　　　}
　　　　}