锐客网

  1. 首页 > it技术 > >

关于尺寸的那些事

说到前端肯定会遇到这样一个事情, 2倍图,3倍图, em, rem, px 等等.
沟通起来你说的那个不是我说的那个单位.
这些单位都是在数字化时代产生的单位, 当然跟我们的数字信息相关的了.
在这里给大家说明一下每个单位的概念.
1. px 像素
px是像素的意思. 嗯, 原意就是 picture和element的缩写英文叫 pixel. 用中文来解释就是图像元素的缩写喽.
拿一个图片来讲下面就是一个50pxx50px的图片.
关于尺寸的那些事
文章图片
50x50 关于尺寸的那些事
文章图片
放大效果图 把这个图放大后你会发现.
这个图片就是一个色块组成的, 长50个宽50个的色块.
像素里指的元素就是这色块了. 一个色块就是一个像素.
2. pt 苹果手机, 字体, 印刷行业的单位
pt是 point的缩写. 一点为单位, pt更早出现在印刷行业. 1pt 等于 1/72英寸
印刷的时候根据打印机的 dpi不同导出来的像素也不同.
字体单位 pt的计算方式: px = pt * 1/72 * 浏览器的 dpi
一般浏览器默认的是96. 那么 9pt = 9 * 1/72 * 96 = 12px.
我估计根据显示器不同浏览器获取显示的dpi.
对于 web 开发来说 使用pt这个单位基本已经淘汰了. 不推荐用这个单位.
在苹果开发就不一样了.
简单明了.
1pt 等于 163ppi的时候 1px, 326ppi的时候是 2px, 401ppi的时候是 3px了.
6plus的时候实际显示跟渲染的又不一样. 详细查看这个说明
ppi ppi是指 pixcel per inch. 理解了像素之后这个就好理解了.
一英寸里有多少个像素点的意思, 1ppi 就是, 一英寸 一个像素 10ppi 就1英寸里有十个像素 ppi值 越高越清晰了
关于尺寸的那些事
文章图片
苹果手机个型号分辨率与尺寸细节 我们工作的时候在电脑显示器里工作的.
再看一下你电脑的 ppi 是多少.
假如你的显示器分辨率是1920x1080
PPI =（√19202+10802）/ 显示器尺寸
在1920X1080分辨率下：
15英寸PPI是146.85
21.5英寸PPI是102.46
23英寸PPI是95.78
24英寸PPI是91.79
27英寸PPI是81.59
3. dp 安卓单位
dp也叫dip，是device independent pixels。跟苹果的 pt理解成一样的也可以的.
px = 1dp * (设备的dpi/160)
dpi指的是 dot per inch的意思.
一个英寸里有多少个点的意思, 安卓手机的话, 这里说的一个点就是指一个像素
印刷行业里使用的 dpi指的是打印机里的一个针喷出来的点, 这里就不详细说明印刷行业的单位了.
em
em是 elment的缩写. 一个元素为单位的. 这里的元素指的是 HTML``当前标签里的font-size.
当前没有设置 font-size的话就继承上级元素了.
不推荐用这个单位
rem
rem是 root elment的缩写. 一个跟元素为单位的. 根元素指的是 HTML html标签里的font-size
【关于尺寸的那些事】H5开发的时候就用js来获取屏幕像素. 动态计算html的 font-size 其他单位就用rem来统一后实现放大2倍,3倍的效果.
或者用view-port来实现,
或者两个并用情况也有

    推荐阅读


    上一篇：场论1

    下一篇：思君如满月