移動端單位轉換

iOS尺寸單位pt、ppi與px之間換算關系

  • px：像素，構成影像的最小單位
  • ppi：Pixels Per Inch，即每英寸所擁有的像素數目，屏幕像素密度
  • pt：iOS開發(fā)單位，即point，絕對長度，約等于0.16毫米

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

iOS開發(fā)單位 pt 長度的推算：

  • iOS 開發(fā)中用到的單位 pt 是獨立像素的意思，它是絕對長度，不隨屏幕像素密度變化而變化（和我們日常用到的毫米、厘米是一個意思，只是它要小得多），在非視網膜的 iPhone 上（iPhone 3G），蘋果規(guī)定 1px=1pt，也就是說 pt 和像素點是一一對應的。但隨著 iPhone 4 的到來，高分屏出現了（視網膜屏），這個時候 1pt 對應 2px。所以用固定長度 pt 作為開發(fā)單位的好處是：這樣可以統(tǒng)一圖形在同一種類不同型號設備上圖形的大小。而如果用像素作為單位的話，就亂了套了，因為在不同像素密度的屏幕里面，像素本身大小是不一樣的。


    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 個像素，而蘋果又規(guī)定在這種非視網膜的 iPhone 上，1pt=1px，所以我們也可以說每英寸上有 163 個 pt，那么 1pt=1/163 英寸，這就是 iOS 開發(fā)單位 pt 的長度：1pt = 1 /163 英寸 * 25.4毫米 ≈ 0.16 毫米。

以上推算也說明了為什么當我們在做 iOS 客戶端設計的時候（通常我們以@2x來設計），開發(fā)說的圖片尺寸多少 pt，換算成像素要乘以2的原因（如果我們做 iphone6+ 的設計要在 pt 數×3）。再去看iphone的各個尺寸就很簡單了?？梢钥闯鰅phone的屏幕密度只有3種，即@1x，163ppi（iphone3gs）@2x，326ppi（iphone4、4s、5、5s、6）@3x,401ppi（iphone6+）

6902442-17a8708179b57807.jpg

移動端開發(fā)過程中的單位轉換

方法一：

  • 在開發(fā)移動端中，ui一般會以750px作為基準設計視覺圖，但是會給出蘋果的@2x ====> 也就是1pt = 2px ，但是在開發(fā)過程中，我們在設計稿上面得到多少個pt,在寫代碼的時候要寫成多少個px ;比如在@2x視覺圖下，一個div的高度為100pt，我們寫代碼的時候要寫成100px,因為蘋果手機的高分屏（當然安卓手機也是這個模式做）

  • px 轉rem :在做項目的時候，為了適配，需要把px轉換成rem,在vscode中，有一個插件：px to rem ，安裝之后，在setting.json 中"px-to-rem.px-per-rem": 你的根部px,

  • 代碼開發(fā)中用淘寶的flexible.js 做適配

方法二：

vue2.0 類淘寶不同屏幕適配及px與rem轉換問題

因為項目需要，vue開發(fā)項目，必須將已寫的以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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容