rn適配手機螢幕

2021-09-28 11:34:03 字數 1031 閱讀 8826

適配手機螢幕,寬、高、字型

'use strict';

import react from 'react';

import from 'react-native';

var uiwidth = 375;

var uiheight= 667;//這裡的值,是設計稿中的高度iphone6

var pixel= 1 / pixelratio.get();

var screenwidth= dimensions.get('window').width;

var screenheight= dimensions.get('window').height;

var pixelratio= pixelratio.get();

var fontscale=pixelratio.getfontscale();

var scale= math.min(dimensions.get('window').height / 667, dimensions.get('window').width / 375);

var utils =

return getvalue

},/*高度適配,例如我的設計稿某個樣式高度是50pt,那麼使用就是:utils.yheight(50)*/

yheight(value)

return getvalue

},/*字型大小適配,例如我的設計稿字型大小是17pt,那麼使用就是:utils.yfont(17)*/

yfont(value) else

// iphone 5

if (deviceheight < 667)

// iphone 6-6s

if (deviceheight <= 735)

// older phablets

return fontsize * 1.25;

}if (deviceratio === 3) else }}

},};module.exports = utils;

手機端螢幕適配

2.常見的移動端適配方法 適配方案有很多種,常見的方法有以下幾種 3.rem適配原理 rem是相對長度單位,可以做到一樣的取值,在不同尺寸的螢幕上的大小按比例縮放。rem的定義 rem font size of the root element 是相對於根元素 即html元素 font size計算...

unity實戰 手機螢幕適配

使用背景 為了在ui中使用特效層,專案canvas採用了screen space camera型別 ui的scale mode 選擇的是scale with screen size 的expand,畫布大小填的是1334,750 在該選擇下,會自動根據解析度適配寬度 高度。自動適配的規則是 螢幕實際...

手機螢幕適配技術預研

前言 隨著手機螢幕的不斷的變化,同時也遇到一些使用者手機螢幕還是處於240 320這種螢幕的大小,當然也存著在一些不規則的螢幕解析度心寸大小。對於很多的ui來說,不同的手機螢幕很多時候得出多套的圖才能保證手機客戶端在不同的螢幕上實現匹配。針對手機客戶端在不同螢幕下的實現進行規劃,並制定出能夠計算出具...