AI 助理
备案控制台
开发者社区 人工智能 文章 正文

px、em、rem区别 pt ppi dpi vw vh

2021-12-24 148
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： px、em、rem区别 pt ppi dpi vw vh

px

image.png

为什么像素的物理尺寸不固定？

image.png

都是图片相关信息，图片体积和像素有什么关系？

image.png

为什么我们要买高像素的相机？

image.png

image.png

ppi：像素密度（pixel per inch）

image.png

image.png

为什么说ppi决定图片的物理尺寸？

image.png

注意：

同一显示屏上查看图片，像素量越大，图片尺寸越大。

显示分辨率一定的情况下，显示屏越小图像越清晰（比如MacBook），反之，显示屏大小固定时，显示分辨率越高图像越清晰。

对于设计师来说像素密度很重要，需要很据像素密度来切图和适配，理解了像素密度的意义，就理解了几倍图之间的关系。


文章标签：
编解码
江咏之
目录
相关文章
小周sir
|
6月前
vw、px、vh 和 rem应用场景以及区别
【4月更文挑战第2天】 vw、px、vh 和 rem应用场景以及区别
小周sir
900 10
秃头请走开
|
前端开发
常用单位 px像素 %百分比 rem em vw vh pt磅值
常用单位 px像素 %百分比 rem em vw vh pt磅值
秃头请走开
65 0
子玉欸
|
6月前
|
编解码 前端开发 小程序
CSS中rpx、px、em、rem、%、vh、vw各自都代表什么
CSS中rpx、px、em、rem、%、vh、vw各自都代表什么
子玉欸
125 0
大树营养快线
|
15天前
|
UED
em/px/rem/vh/vw区别
【10月更文挑战第24天】理解和掌握 em、px、rem、vh、vw 这几种单位的特点和应用，能够帮助我们更好地进行网页设计和布局，实现更优秀的用户体验和适应不同屏幕尺寸的能力。
大树营养快线
19 6
万少！
|
1月前
|
前端开发 小程序 JavaScript
面试官：px、em、rem、vw、rpx 之间有什么区别？
面试官：px、em、rem、vw、rpx 之间有什么区别？
万少！
36 0
朝阳39
|
4月前
|
编解码 前端开发
CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
朝阳39
66 0
snowball_win
|
资源调度 JavaScript
布局：px to vw、vh
布局：px to vw、vh
snowball_win
110 0
布局：px to vw、vh
贰零壹玖.
|
6月前
|
编解码 前端开发 容器
vh，vw，px，%有什么区别
vh，vw，px，%有什么区别
贰零壹玖.
315 0
雷霆半月斩掉你的板砖
|
6月前
|
编解码
px，em，rem，vw，vh之间的区别
px，em，rem，vw，vh之间的区别
雷霆半月斩掉你的板砖
78 0
天界程序员
|
6月前
|
编解码 前端开发
CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
天界程序员
130 0