upx与px互相转换

随着越来新技术的诞生，跨平台的各种方案层出不穷，其跨平台所设计单位也各有不同。为了实现不同平台的尺寸转换，也出现许多新型的尺寸单位。下面详细理理具体有哪些尺寸单位。
传统平台尺寸单位：

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

  单位换算（正常情况下）

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

px转换upx

详细转换公式：
设计稿 1px / 设计稿基准宽度 = 框架样式 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转换px

关于upx转换方案，我找了需求都没找到索性就自己用python写一个。

安装环境

• Python 3.8.3
• vs code

  思路

  扫描整个css文件，依次遍历数据行，css数据每行主要由空格、分号，括号组成，并且不能破坏格式，所以必须考虑原格式替换，常见格式总结：
• 第一种

.view{
    padding: 10upx;
}

• 第二种

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

• 第三种

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

我考虑的方案：
以空格分割每行字符，提取分割后每个数据中的数字，将分割后数字转换，如2upx:1px比例转换，转换后将原数据通过替换的方式替换原有的数据，如replace(2upx,1px)保持原有不变，还有在转换过程中考虑到数据整形与兼容问题最好使用向上取整方案。
详细代码：

#转换upx 为 px  转换比例为 1px:2upx
import re
import os
import math
def read_file(filepath):
    keycontent=""
    fp=open(filepath,encoding='utf-8')
    #获取读取行数据
    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:
                    #提取字符串数字
                    number = re.findall(r'\d+', key)[0]
                    rawvalue= number+'upx'
                    #比例转换 向上取整
                    number= math.ceil(int(number)/2)
                    #判断原数据是否有
                    value=str(number) +'px' 
                    #插入原有数据格式中
                    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)
    #创建文件开始写入
    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:'))
#开始转换
makefile(path,ret)
#print(ret)

目前最常见跨平台框架

• Uniapp

使用vue.js开发，跨平台内核基于weex，可以同时开发小程序，快应用，android，ios，h5多平台

• Taro

使用vue.js与react.js双框架可选项开发，跨平台内核基于react native，可以同时开发小程序，快应用，android，ios，h5多平台

• Flutter

使用dart语言开发，可跨ios，android，网页端三端。