简言 px

作者: 耀得嘛 | 来源:发表于2019-03-24 12:26 被阅读0次

在现代 web 中,px 是一个距离单位,具有以下特性

  • 相对性
  • 近似性
  • 与屏幕分辨率相关
  • 与屏幕观看距离相关
  • 面向用户观感进行优化

心智模型

  • 1px 是在该设备下用户可见元素的最小单位
  • 例如,一条细线
  • 在高分辨率屏幕下,虽然物理上可以显示更小的元素,但是对用户友好对最小元素通常会大一些

参考 px 的定义

  • 在 96dpi 的设备上,间隔一臂远,一个像素点看上去那么大

实际 px 的定义

  • 结合该设备的分辨率及典型用户观看距离,定义 px 的大小(1px 等于多少个屏幕像素),使得用户观感尽量接近参考 px 定义

一些结论

  • 1px 在不同设备上,绝对尺寸和对应的屏幕像素都是不一样的
  • 别紧张!px 是以用户实际体验为标准设计的距离单位,只要大家(开发者和设备厂商)都向标准看齐,那么可以期望,同一套样式设计,在不同设备的典型场景下用户观感会非常接近

参考

相关文章

  • 简言 px

    在现代 web 中,px 是一个距离单位,具有以下特性 相对性 近似性 与屏幕分辨率相关 与屏幕观看距离相关 面向...

  • 为 px 正名

    背景文章 简言 px 正文 为了便于讨论,这里我们先暂时将 css 中的距离单位按是否与空间相关分为两类。空间相关...

  • SnapKIt中矢量单位转换像素PX单位 swift3.0_0n

    前言: 美工设计常用到px单位,而ios开发中并不能直接设置px单位,并且px与矢量单位换算也极其麻烦.遂开发中简...

  • css 四角边框

    // background-size: 2px 80px, 80px 2px, 2px 80px, 80px 2...

  • 背景图片居中

    div{ padding: 13px 20px 14px 20px; height: 57px; ...

  • icon 启动页

    iPhone需要10种不同尺寸的图标,分别是:40px40px,57px57px,58px58px,60px60p...

  • 简言简意

    简言简意

  • css padding内边距设置顺序

    不允许使用负值。 padding:10px 5px 15px 20px;上右下左 padding:10px 5px...

  • 简言

    匆匆忙忙 笨手笨脚抢完的话, 结果会不甚满意的呢, 那倒不如一步一步有条不紊, 然后欣赏自己的杰作~

  • 简言

    我突然很想让时间退回去,也不用倒流那么多,能回到早春二月就行,至少那时候,一切都算还有希冀,有韶光里未开的二月兰,...

网友评论

      本文标题:简言 px

      本文链接:https://www.haomeiwen.com/subject/vqfuvqtx.html