摘要:方式,是用于把默认以单位长度,转化为对应的数值。屏幕的单位和概念对比在中,等于,表示像素密度。下面给出一些常见屏幕概念的对比表格与的关系为自适应布局方案自适应布局方案采用了,将等比放大到上的自适应布局。
默认单位 dp
设置默认宽高的时,是不需要带单位的,如下所示:
那么,布局的默认单位是什么?在官方文档中有一段关于布局单位的描述。
static getPixelSizeForLayoutSize(layoutSize: number) Converts a layout size (dp) to pixel size (px). Guaranteed to return an integer number.
getPixelSizeForLayoutSize 方式,是用于把默认以 dp 单位长度,转化为对应的 px 数值。那么很明显, 默认的布局单位是 dp。
1dp = 1(css)pxdp 到底是个什么样单位?
关于 dp 官网给了我一个定义:
A dp is equal to one physical pixel on a screen with a density of 160.To calculate dp: dp = (width in pixels * 160) / screen density
很明显, dp 与 物理px 有一个关于 (160/screen density) 的正相关的关系:
1dp = 1物理px (screen density = 160) 1dp = 2物理px (screen density = 320) 1dp = 3物理px (screen density = 480)
同理在 H5 页面,以下等式是成立的。
1 (css)px = 1物理px (device pixel ratio = 1) 1 (css)px = 2物理px (device pixel ratio = 2) 1 (css)px = 3物理px (device pixel ratio = 3)
而实际上 (160/screen density) 就是 pixelRatio,也就是就是写 H5 页面时,像素比率 window.devicePixelRatio。
也就是说,1dp = 1(css)px。
屏幕的单位和概念对比在 Android 中,screen density 等于 DPI,表示像素密度。
在 google 布局单位文档中,关于 screen density 有过这样的描述,
dpi 有过这样的描述
其中 240/160 两列,像素比同为1.5,可证明 screen density 和 dpi概念一样,只是换了个表达方式。
下面给出一些常见屏幕概念的对比表格
dp 与 px 的关系为:
1dp = 1(css)px = 1px * pixelRatio自适应布局方案
自适应布局方案采用了,将 UI 等比放大到 app 上的自适应布局。
UI 给默认 640 的图,采用 pxToDp 函数,即可将 UI 等比放大到 Android 机器上。
import {Dimensions} from "react-native"; // 58 app 只有竖屏模式,所以可以只获取一次 width const deviceWidthDp = Dimensions.get("window").width; // UI 默认给图是 640 const uiWidthPx = 640; function pxToDp(uiElementPx) { return uiElementPx * deviceWidthDp / uiWidthPx; } export default pxToDp;
调用方法
import pxToDp from "./pxToDp"; ......
如果 UI 图默认不是 640 宽,可以通过 PS 设置为 640 宽。
参考链接:
RN官网 http://facebook.github.io/react-native/docs/pixelratio.html#content
px、dp、sp对比 http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-on-android/2025541#2025541
Android 布局方案(Google)https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-density-independent-pixels-dp-
Android 布局方案(赵凯强)http://blog.csdn.net/zhaokaiqiang1992/article/details/45419023
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79136.html
摘要:使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起,相信大家并不陌生。 Sticky Footer,完美的绝对底部 - 前端 - 掘金写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为...
摘要:表示在上的对齐方式,基于的顶部基于的底部基于的中部布满整个。的属性所占的比例大小。它允许项目中当个和其他不一样的对齐方式,会覆盖的属性。 React-Native 样式的使用。 React-Native 编写的应用的样式不是靠css来实现的,而是依赖javascript来为你的应用来添加样式,先不讨论这样做的好处与坏处,因为这个实现方法本身就存在着很多争议,我们主要关注他的样式的语法和...
阅读 3083·2021-10-14 09:42
阅读 3537·2019-08-26 13:56
阅读 3368·2019-08-26 11:59
阅读 870·2019-08-23 18:00
阅读 2099·2019-08-23 17:51
阅读 3500·2019-08-23 17:17
阅读 1459·2019-08-23 15:11
阅读 5054·2019-08-23 15:05