设计-前端设计尺寸与规范

设计尺寸

英寸

• 屏幕对角线的长度，一英寸~~3.多厘米

像素(Pixel—px)—物理分辨率

• 物理分辨率是硬件支持
• 像素是图像的基本采样单位，是组成位图的最小单元
• 不是一个具体的量，而是一个抽样的
• 尽管像素能够使用一个点来表示，但是因为像素的点不尽相同，所以是个抽象

分辨率

网点密度(DPI)

像素密度(PPI)

逻辑分辨率(pt–point),像素倍率

• 有软件支持
• 逻辑分辨率的多少倍是物理分辨率，看具体情况

前端与设计所用的尺寸

• 设计师：一般使用px即物理分辨率
• 前端：一般使用pt即逻辑分辨率

设计尺寸的问题-

• 375px—没有viewport 是指物理分辨率，1px == 1px

• 375px—有viewport 是指pt,逻辑分辨率，1px = 1pt

• 所以，这就是为什么需要viewport，pt与px有倍率关系(根据不同的手机倍率是不一样的)

• 但是移动端，我们通常使用rem,

iPhone的pt与px的倍率关系

• iPhone6/7/8：中 1pt == 2px
• iPhone6/7/8 plus：中 1pt == 3px
• iPhone X ：中 1pt == 3px

设计的常用尺寸—移动端（ios)

• 状态条：20pt（前端不写）

• 导航条：40pt

• 一般列表：44pt

• 底部导航栏：高度—49pt，文字高度—10pt

• 弹出框：宽度—270pt，圆角—12pt

  扫描二维码关注公众号，回复： 11458846 查看本文章

• 列表图片：29pt

• 分段器：29pt

• 计步器：29pt

• 间距：

  • 8pt
  • 15pt

• 文字：

  • 17pt
  • 20pt
  • 12pt
  • 13pt
  • 10pt

• 圆：28pt

设计师

• 设计师什么尺寸都有

• 转成pt再写（非响应式）

  • 750px宽 转 375pt
  • 1125px 转 375pt
  • 1242px 转 414pt

• 前端用flex

  • 100px 转 1rem
  • 修改flex.js的参数（第一个参数设计稿的宽）

• 小程序

  • 750rpx == 一个平面宽
  • 设计师设计 750px 1px = 1rpx
  • 1125px 30px/3*2---转成pt*2,转成2倍屏

规则是用来打破的，不用称为一个个的模板