一、android、ios一般用作适配的单位是dp、pt。
在480 * 800分辨率中,3.7屏幕对角线英寸数的设备效果图如下
20170829162412459.png
在480 * 800分辨率中,5.1屏幕对角线英寸数的设备效果图如下
20170829162422477.png
通过以上的分析,dp在小尺寸手机展示占屏宽比更大,在大尺寸手机展示占款比更小。这也是符合以前大屏手机的理念(大手机展示更多的内容)
二、React Native中的单位是什么?
All dimensions in React Native are unitless, and represent density-independent
pixels. Setting dimensions this way is common for components that should always
render at exactly the same size, regardless of screen dimensions.
rn会自动转成原生的dp、pt。dp也叫dip,是device independent pixels。设备不依赖像素的一个单位。在不同的像素密度的设备上会自动适配。
三、React Native兼容处理。
产品现在越来越期望展示一致性,期望大屏体验度更好,起到同样的内容展示,有放大的感觉。但是直接采用数字用于布局,在大屏手机的展示的内容虽然会更多,但是不够清晰。于是封装了一个简单的屏幕适配工具,根据ui给的设计图宽度作为基础宽度像素。
/**
* 屏幕适配
*/
import { Dimensions } from 'react-native';
// 设计图上的比例,宽度
let basePx = 375;
const deviceW = Dimensions.get('window').width;
/**
* 适配宽高
* @param {width、height} px
*/
export default function px2dp(px) {
return px * deviceW / basePx;
}