首页 > 其他分享 >Material Design基础 - Pixel Density

Material Design基础 - Pixel Density

时间:2022-10-22 17:58:13浏览次数:92  
标签:Density 分辨率 Material 像素 Design 密度 屏幕 Pixel dp

像素密度(Pixel Density)

一英寸屏幕上存在的像素数称为像素密度。

屏幕像素密度和分辨率因平台而异。

屏幕密度变化

高密度屏幕的每英寸像素数比低密度屏幕的多。因此,相同像素尺寸的UI元素在低密度屏幕上显示得更大,而在高密度屏幕上显示得更小。

计算屏幕密度(screen density)

要计算屏幕密度,可以使用以下等式:
屏幕密度=以像素为单位的屏幕宽度(或高度)/以英寸为单位的屏幕宽度(或高度)

密度无关性(Density independence)

密度独立性指的是在不同密度的屏幕上统一显示UI元素。

密度无关的像素(Density-independent pixels)

密度无关的像素,写为dp(发音为“dips”),是一种灵活的单元,可以在任何屏幕上缩放以获得统一的尺寸。它们提供了一种灵活的方式来适应跨平台的设计。
Material UI使用与密度无关的像素在不同密度的屏幕上一致地显示元素。

Android上的像素密度

开发Android应用程序时,使用dp在不同密度的屏幕上均匀显示元素。

Dps和屏幕密度

1dp等于屏幕密度为160的一个物理像素。
要计算dp:
dp=(像素宽度*160)/屏幕密度

Screen physical width Screen density Screen width in pixels Screen width in dps
1.5 in 120 180px 240dp
1.5 in 160 240px 240dp
1.5 in 240 360px 240dp

可缩放像素(Scalable pixels (sp))

可缩放像素(sp)的功能与密度无关像素(dp)相同,但用于字体。sp的默认值与dp的默认值相同。
sp和dp之间的主要区别在于sp保留用户的字体设置。具有更大的可访问性文本设置的用户将看到字体大小与其文本大小首选项匹配。

ios上的像素密度

iOS使用逻辑分辨率确定密度,该分辨率以点为单位测量密度。

逻辑分辨率 (Logical resolution)

对于逻辑分辨率,使用本机比例因子缩放点,该因子映射到设备的本机分辨率(以像素为单位)。
例如,在为iPhone X设计时,您将设计375 X 812点的逻辑分辨率。渲染时,图形硬件会对元素进行处理,以填充iPhone X的1125 X 2436像素屏幕。

iOS的单位

为iOS设计时,使用点(pts)
了解更多信息:
苹果iOS在显示器上的文档
PaintCode的iPhone分辨率指南

web上的像素密度

逻辑分辨率

使用设备的逻辑分辨率,该分辨率与设备的屏幕分辨率成比例。

web单位

在为web设计时,将dp替换为px(像素)

参考文档

Material System - layout pixel density

标签:Density,分辨率,Material,像素,Design,密度,屏幕,Pixel,dp
From: https://www.cnblogs.com/guoapeng/p/16816778.html

相关文章

  • Material Design基础 - 响应式布局网格
    响应式布局网格MaterialDesign的响应式布局网格可根据屏幕大小和方向进行调整,确保布局的一致性。Columns,gutters,andmargins响应式布局网格由三个元素组成:Columns,......
  • Material Design基础 - spacing methods
    spacingmethodsspacingmethods使用基线网格、关键线、填充和增量间距来调整比率、容器和触摸目标。基准网格8dp网格所有组件都与移动设备、平板电脑和台式机的8dp方......
  • Material Design基础 - Surfaces
    MaterialSurfacesMaterial设计具有三个维度的品质,这些品质反映在其对表面(Surfaces)、深度和阴影的使用中。Materialenvironment在真实世界中,物体可以堆叠或相互接触,......
  • Material Design 基础 - 文字排版
    文字系统(Thetypesystem)使用排版尽可能清晰有效地呈现您的设计和内容。文字类型标尺(Typescale)质感设计的文字类型标尺包括一系列对比样式可满足产品及其内容的需求......
  • Material Design基础 - Light and shadows
    光线和阴影materialsurface阻挡光源时会投射阴影。在material设计环境中,虚拟灯光照亮UI。关键灯光创建更清晰的方向性阴影,称为关键光阴影。环境光从各个角度出现,以创建......
  • Material Design 基础 - Layout
    理解layoutmaterial设计布局使用统一的元素和间距,以鼓励在多种平台、环境和屏幕尺寸之间的一致性。原则Predictable(可预测的)使用直观且可预测的布局,并具有一致的U......
  • Material Design 基础 - 导航
    说明导航允许用户在应用程序中移动。导航类型导航是在应用程序的屏幕之间移动以完成任务的行为。它是通过几种方式实现的:专用导航组件、将导航行为嵌入内容以及平台功能......
  • vite Ant Design Vue 动态主题
    简单记录一下。官网地址:https://www.antdv.com/docs/vue/customize-theme-cnantd全局化配置:https://www.antdv.com/components/config-provider-cn开始没懂怎么去使用,查......
  • [转载] Image Pixels
    转载自http://shutha.org/node/789 ImagePixelsPicturesthatareprintedorthataredisplayedonadigitalscreenlikeamonitororaresimplyindigita......
  • ant.design-vue 级联多选组件
    取自doit-ui-web ,基于ant.design封装的功能组件,实现多选级联样式表功能,根据自身情况引入到自己的项目中 <template><divclass="gb-ant-select-multiple-c......