隨著越來(lái)新技術(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)換方案只怎，我找了需求都沒(méi)找到索性就自己用python寫一個(gè)袜瞬。
安裝環(huán)境
- Python 3.8.3
- vs code
思路
掃描整個(gè)css文件，依次遍歷數(shù)據(jù)行身堡，css數(shù)據(jù)每行主要由空格邓尤、分號(hào)，括號(hào)組成，并且不能破壞格式汞扎，所以必須考慮原格式替換季稳，常見(jiàn)格式總結(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ù)通過(guò)替換的方式替換原有的數(shù)據(jù)痹扇，如replace(2upx,1px)保持原有不變铛漓，還有在轉(zhuǎn)換過(guò)程中考慮到數(shù)據(jù)整形與兼容問(wèn)題最好使用向上取整方案。
詳細(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)建文件開(kāi)始寫入
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:'))
#開(kāi)始轉(zhuǎn)換
makefile(path,ret)
#print(ret)
目前最常見(jiàn)跨平臺(tái)框架
使用vue.js開(kāi)發(fā)浓恶，跨平臺(tái)內(nèi)核基于weex，可以同時(shí)開(kāi)發(fā)小程序结笨，快應(yīng)用包晰，android，ios禀梳，h5多平臺(tái)
使用vue.js與react.js雙框架可選項(xiàng)開(kāi)發(fā)杜窄，跨平臺(tái)內(nèi)核基于react native肠骆，可以同時(shí)開(kāi)發(fā)小程序算途，快應(yīng)用，android蚀腿，ios嘴瓤，h5多平臺(tái)
使用dart語(yǔ)言開(kāi)發(fā)，可跨ios莉钙，android廓脆，網(wǎng)頁(yè)端三端。
