隨著越來新技術(shù)的誕生，跨平臺(tái)的各種方案層出不窮，其跨平臺(tái)所設(shè)計(jì)單位也各有不同。為了實(shí)現(xiàn)不同平臺(tái)的尺寸轉(zhuǎn)換，也出現(xiàn)許多新型的尺寸單位。下面詳細(xì)理理具體有哪些尺寸單位。
傳統(tǒng)平臺(tái)尺寸單位：

• ios：pt
• android:dp
• web:px、rem、em
  新興尺寸單位：
• 微信小程序：rpx
• uniapp:upx

  單位換算（正常情況下）

  1pt=1dp=2px
  2rpx=2upx=1px

px轉(zhuǎn)換upx

詳細(xì)轉(zhuǎn)換公式：
設(shè)計(jì)稿 1px / 設(shè)計(jì)稿基準(zhǔn)寬度 = 框架樣式 1upx / 750upx
解決方案-px2upx：

非全局

uni.getSystemInfo({
    success: function(e) {
          let width=e.windowWidth;
          //獲取半屏
           let halfscreen= uni.upx2px(width/2);
        }
});

全局配置

1.安裝 npm i postcss-px2upx -D
2.配置postcss.config.js

const pkg = require('./package.json')
module.exports = {
  plugins: [
    require('postcss-import'),
    require('autoprefixer')({
      browsers: pkg.browserslist
    }),
    require('postcss-px2upx')({
      baseDpr: 1,
      upxUnit: 0.5
    }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}

upx轉(zhuǎn)換px

關(guān)于upx轉(zhuǎn)換方案，我找了需求都沒找到索性就自己用python寫一個(gè)。

安裝環(huán)境

• Python 3.8.3
• vs code

  思路

  掃描整個(gè)css文件，依次遍歷數(shù)據(jù)行，css數(shù)據(jù)每行主要由空格、分號(hào)，括號(hào)組成，并且不能破壞格式，所以必須考慮原格式替換，常見格式總結(jié)：
• 第一種

.view{
    padding: 10upx;
}

• 第二種

.view{
    padding: 10upx  10upx  10upx  10upx;
}

• 第三種

.view{
    padding: calc(20upx - 10upx);
}

我考慮的方案：
以空格分割每行字符，提取分割后每個(gè)數(shù)據(jù)中的數(shù)字，將分割后數(shù)字轉(zhuǎn)換，如2upx:1px比例轉(zhuǎn)換，轉(zhuǎn)換后將原數(shù)據(jù)通過替換的方式替換原有的數(shù)據(jù)，如replace(2upx,1px)保持原有不變，還有在轉(zhuǎn)換過程中考慮到數(shù)據(jù)整形與兼容問題最好使用向上取整方案。
詳細(xì)代碼：

#轉(zhuǎn)換upx 為 px  轉(zhuǎn)換比例為 1px:2upx
import re
import os
import math
def read_file(filepath):
    keycontent=""
    fp=open(filepath,encoding='utf-8')
    #獲取讀取行數(shù)據(jù)
    content=fp.readlines()
    for c in content:
        if 'upx' in c:
            items=c.split( )
            for index in range(len(items)):
                key=items[index]
                if 'upx' in key:
                    #提取字符串?dāng)?shù)字
                    number = re.findall(r'\d+', key)[0]
                    rawvalue= number+'upx'
                    #比例轉(zhuǎn)換 向上取整
                    number= math.ceil(int(number)/2)
                    #判斷原數(shù)據(jù)是否有
                    value=str(number) +'px' 
                    #插入原有數(shù)據(jù)格式中
                    items[index]=key.replace(rawvalue, value)

            c=' '.join(items)
        keycontent+=c
    fp.close()
    return keycontent

def makefile(path,content):
    #判斷是否為.css文件
    hassuffix='.css' in path
    if hassuffix!=True:
        path+='.css'
    #判斷文件是否存在，如果存在就刪除
    if os.path.exists(path):
       os.remove(path)
    #創(chuàng)建文件開始寫入
    f = open(path,'w+',encoding='utf-8')
    f.write(content)
    f.seek(0)
    read = f.readline()
    f.close()
    print(read)
#獲取讀取文件
ret=read_file('main.css')
#獲取文件名
path = str(input('Please enter a suffix named *.css file:'))
#開始轉(zhuǎn)換
makefile(path,ret)
#print(ret)

目前最常見跨平臺(tái)框架

• Uniapp

使用vue.js開發(fā)，跨平臺(tái)內(nèi)核基于weex，可以同時(shí)開發(fā)小程序，快應(yīng)用，android，ios，h5多平臺(tái)

• Taro

使用vue.js與react.js雙框架可選項(xiàng)開發(fā)，跨平臺(tái)內(nèi)核基于react native，可以同時(shí)開發(fā)小程序，快應(yīng)用，android，ios，h5多平臺(tái)

• Flutter

使用dart語言開發(fā)，可跨ios，android，網(wǎng)頁端三端。