移动端单位转换

iOS尺寸单位pt、ppi与px之间换算关系

px：像素，构成影像的最小单位
ppi：Pixels Per Inch，即每英寸所拥有的像素数目，屏幕像素密度
pt：iOS开发单位，即point，绝对长度，约等于0.16毫米

注意：在网上有些文章对iOS的pt存在一些误解，它不等同于印刷概念里的 1 pt=1/72英寸

iOS开发单位 pt 长度的推算：

iOS 开发中用到的单位 pt 是独立像素的意思，它是绝对长度，不随屏幕像素密度变化而变化（和我们日常用到的毫米、厘米是一个意思，只是它要小得多），在非视网膜的 iPhone 上（iPhone 3G），苹果规定 1px=1pt，也就是说 pt 和像素点是一一对应的。但随着 iPhone 4 的到来，高分屏出现了（视网膜屏），这个时候 1pt 对应 2px。所以用固定长度 pt 作为开发单位的好处是：这样可以统一图形在同一种类不同型号设备上图形的大小。而如果用像素作为单位的话，就乱了套了，因为在不同像素密度的屏幕里面，像素本身大小是不一样的。

1.jpg

2.jpg

图中我们看到 iPhone 3G 和 iPhone 4 的屏幕长宽都是 320480 pt，而像素长宽却相差两倍（iPhone 3G：480320，iPhone 4：960*640），所以你理解 pt 的意思了吗？既然 pt 是个固定尺寸，那么它到底有多长？我们可以通过计算 iPhone 3G 的屏幕像素密度 ppi 推算出来：

3.jpg

iPhone 3G 的屏幕像素密度 ppi 是每英寸 163 个像素，而苹果又规定在这种非视网膜的 iPhone 上，1pt=1px，所以我们也可以说每英寸上有 163 个 pt，那么 1pt=1/163 英寸，这就是 iOS 开发单位 pt 的长度：1pt = 1 /163 英寸 * 25.4毫米 ≈ 0.16 毫米。

以上推算也说明了为什么当我们在做 iOS 客户端设计的时候（通常我们以@2x来设计），开发说的图片尺寸多少 pt，换算成像素要乘以2的原因（如果我们做 iphone6+ 的设计要在 pt 数×3）。再去看iphone的各个尺寸就很简单了。可以看出iphone的屏幕密度只有3种，即@1x，163ppi（iphone3gs）@2x，326ppi（iphone4、4s、5、5s、6）@3x,401ppi（iphone6+）

6902442-17a8708179b57807.jpg

移动端开发过程中的单位转换

方法一：

在开发移动端中，ui一般会以750px作为基准设计视觉图，但是会给出苹果的@2x ====> 也就是1pt = 2px ，但是在开发过程中，我们在设计稿上面得到多少个pt,在写代码的时候要写成多少个px ;比如在@2x视觉图下，一个div的高度为100pt，我们写代码的时候要写成100px,因为苹果手机的高分屏（当然安卓手机也是这个模式做）
px 转rem :在做项目的时候，为了适配，需要把px转换成rem,在vscode中，有一个插件：px to rem ，安装之后，在setting.json 中"px-to-rem.px-per-rem": 你的根部px,
代码开发中用淘宝的flexible.js 做适配

方法二：

vue2.0 类淘宝不同屏幕适配及px与rem转换问题

因为项目需要，vue开发项目，必须将已写的以px为单位的部分，转换为rem。要是全部转换，这大量的计算量，哪怕是sublime Text 的cssrem插件，也是一个庞大的工作量。所以，直接使用插件没商量。

举例子：
1、iphone6

1.jpg

1240722-20171012150455340-242379229.jpg

2、iphone5

2.jpg

1240722-20171012150550262-333483008.jpg

第一步：因为rem是根据更元素来计算大小，所以，捕捉到当前屏幕的大小并赋值给html，这是其一

第二步：使用px2rem插件，来捕捉当前项目的所有px，直接计算相对应数值。

这样，以后写界面，就可以直接用px来构建界面，不用自己去计算啦！

步骤来：

1、安装插件(我是安装了淘宝镜像，所以是cnpm,若是没装淘宝镜像，就npm)

$ cnpm i postcss-px2rem --save

$ cnpm install px2rem-loader --save

2、配置px2rem

build目录下vue-loader.conf.js中，做如下修改：

module.exports = {
    loaders: utils.cssLoaders({
    sourceMap: isProduction
    ? config.build.productionSourceMap
    : config.dev.cssSourceMap,
    extract: isProduction
    }),
    transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
},
postcss:[require('postcss-px2rem')({'remUnit':75,'baseDpr':2})]           /*因为我是以750px(iphone6)宽度为基准，所以remUnit为75*/
}

3、在static目录中，建js文件夹，放flex.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;
        }

        docEl.setAttribute('data-dpr', dpr);
        if (!metaEl) {
          metaEl = doc.createElement('meta');
          metaEl.setAttribute('name', 'viewport');
          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);
          }
        }

        function refreshRem() {
          var width = docEl.getBoundingClientRect().width;
          if (width / dpr > 540) {
            width = 540 * dpr;
          }
          var rem = width / 10;
          docEl.style.fontSize = rem + 'px';
          flexible.rem = win.rem = rem;
        }

        win.addEventListener('resize', function() {
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
        }, false);
        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'] = {}));

4、在index.html中，加入flex.js

<script type="text/javascript" src="static/js/flex.js"></script>