手机的尺寸和分辨率

一、移动端尺寸基础知识

1、英寸

英寸是常用的长度单位,在工业领域被广泛使用,很多图纸、铭牌上都是使用英寸作为长度单位。显示设备特别是电视机使用英寸来表示大小,手机屏幕也继承了这个计量单位。
在这里插入图片描述
如描述iPhone 4s的屏幕是3.5英寸

2、像素

图像是由一个个小点组成的,这些小点就是像素点。图像的基本采样单位,它不是一个确定的物理量,因为像素点的物理大小是不确定的。像素也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象的概念。

3、分辨率

分辨率是屏幕像素的数量,一般用屏宽像素数乘以屏高像素数表示。
描述iPhone 6的屏幕分辨率是750×1334,就是iPhone 6的屏幕是由750列和1334行的像素点排列组成的,每个像素点发出不同颜色的光,构成我们所看到的画面。
在PC时代,分辨率越高,意味着屏幕越大,因为PC具有固定的PPI。但智能手机的屏幕就不是如此了,因为手机的像素密度是不一样的。

4、IOS

1、单位pt点
换算像素px
iPhone 5/6/7
换算: 1:2

iPhone 5/6/7 plus
换算: 1:3

iPhone x
换算: 1:3
2、常见尺寸
常见尺寸
状态栏 20pt
导航栏 44pt
列表 44pt
底部 49pt
列表图标/分段器 29pt
switch w51 h31 r28
3、常见间距
常见间距
8pt
15pt
4、常见的文字
常见的文字
标题 17pt
正常 13pt
最新 10pt

前端如何运用

1、设计师的设计稿
750x1334
2倍

720x1280
2倍

1242x2208
3倍

1080x1920
3倍

看的网上
2、尺寸安排的方式

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果以像素为单位

设计稿子尺寸/倍数
设计稿:88px
写height:44px @2倍

设计稿:60px
写height:20px @3倍

以rem为单位
flexable.min.js
修改设计稿的宽度
在这里插入图片描述

尺寸
设计稿的尺寸/100+rem
高:88px
写 0.88rem

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值