移动端设计的基础尺寸单位与转化

手机屏幕尺寸碎片化：不同手机的屏幕尺寸，分辨率，PPI，逻辑分辨率等信息都不一样，需要对不同设备尺寸单位的了解进行适配。

屏幕尺寸：屏幕大小，即屏幕对角线长度，而不是屏幕的宽度和高度，单位为英寸。

显示/物理分辨率：屏幕拥有像素的总数以及屏幕水平和垂直方向的像素数量，单位为像素。像素/px是组成屏幕图像的最小点，一个相对大小单位，同尺寸屏幕里越小越密越清晰。

屏幕像素密度（ppi）：指每英寸所拥有的像素数。像素密度越高，代表屏幕图像显示越清晰。计算方式很简单，网上有很多免费的ppi计算器可以用，这里就不详细说他的计算公式了。

视网膜屏幕：当你手机距离你约25-30厘米，如果手机ppi达到300以上，你的眼睛将无法分辨出像素点，这就是苹果公司提出的视网膜屏幕。

有时候我们会看到一些dpi的概念，那么ppi和dpi到底有什么区别：

dpi：平面设计/印刷技术单位，指每英寸所能印刷出来的网点数。衡量打印机打印精度的主要参数之一，值越大，表明打印机的打印精度越高。

接下来我们详细讲述一下Android屏幕分级和单位转换：

Android屏幕碎片化：由于Android屏幕ppi不同，就算屏幕尺寸相同，像素尺寸大小也可能不同，所以，Android开发需要一套统一的尺寸单位。Android程序开发统一使用虚拟尺寸单位：dp/dip、sp，这套尺寸单位不会受到ppi影响。

dp/dip：用于Android元素尺寸，如按钮、导航尺寸。

sp：用于字体大小尺寸。

（文字尺寸一般用sp，非文字尺寸一般用dp）

设计：像素/px

开发：dp/sp

二者到底如何换算？与ppi（每英寸所拥有的像素数）有直接关系。

iphone分辨率与单位转换：

ios开发虚拟尺寸单位：point/pt，推荐适配方案：750*1334

移动端设计的基础尺寸单位与转化相关推荐

taro之--设计稿以及尺寸单位
设计稿及尺寸单位在 Taro 中尺寸单位建议使用 px. 百分比 %,Taro 默认会对所有单位进行转换.在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度 100px,那 ...
移动开发之设计稿转换页面单位尺寸
在写这篇文章之前,我询问了在唯品会和腾讯的童鞋.以及公司里面前端大神(深哥),对于设计稿切图的详细方法,经过对比验证,得出设计稿转换页面单位尺寸方法步骤.我分别询问下面四个问题: 1. 设计稿的单位是 ...
P20-前端基础-CSS单位
P20-前端基础-CSS单位 1.概述长度单位: 像素屏幕(显示器)实际上是由一个一个的小点点构成的不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰所以同样的200px在不同的设备下 ...
React Native不同设备分辨率适配和设计稿尺寸单位px的适配
React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...
html5页面设计时做多大的,pc端网页按什么尺寸设计
如果不做全屏,或者主区域没有全屏设置,可以固定中宽,比如bootstrap的container的固定宽度1170px.下面小编给大家介绍pc端网页按什么尺寸设计,一起来看看吧. pc端网页的尺寸设计规 ...
移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo
移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo 前言,反思在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根 ...
B端设计指南-表格设计的常见问题
本文由作者 CE青年于社区发布在上一篇文章,我们讲到对于表格而言你所要具备的基础知识点,没有看过的同学建议先看完上篇再看下篇- 今天咱们落落地,因为表格十分重要,我也在群聊里进行了一次问卷调查,将 ...
B端设计指南 —— 弹窗究竟应该如何设计
这篇文章是我自己在工作中受到各种摧残.无数次开会讨论总结而来,如果你现在深处B端行业,强烈建议大家一定要看完. 收到很多同学关于弹窗的疑问,因为在B端的设计过程中,会接触到很多信息展示方面的疑惑,他们 ...
rem适配的浏览器_[史上最全]UI相关尺寸单位详解 | px、pt、dp、sp、rem、vwvh、rpx、ppi、dpi、dppx...
先给进来看文章的你点个赞尺寸适配应该由开发同事负责处理,处理不好是他的问题,你有兴趣了解这些让人头疼的事,证明你是共产主义好社畜,还有工作量不饱和,Good for you~适配问题是影响设计复现的 ...
AD(altium designer)15原理图与PCB设计教程（六）——印制电路板设计的基础知识
目录序言印制电路板的基础知识印制电路板的结构和种类印制电路板设计流程新建PCB文件 PCB设计环境将原理图信息同步到PCB 网络表的编辑声明:该文只适用于学习,其内容包含来自书本的摘抄和 ...

移动端设计的基础尺寸单位与转化

移动端设计的基础尺寸单位与转化相关推荐

最新文章

热门文章