px和分辨率的关系总结

在相同的屏幕宽高下:如:15.6英寸(396.24毫米)的笔记本电脑:

每单位1920*xxx的分辨率1366*xxx的分辨率
一毫米1920/396.24=4.8个px1366/396.24=3.4个px

  • 高分辨率意味着大约每一毫米5像素点,像素点越多,色块越多,页面越清晰
  • 低分辨率意味着大约每一毫米3像素点,像素点越少,色块越少,页面越模糊

在相同的像素点下:如:1366*xxx的分辨率:

每单位ipad pro(宽度305.7mm)笔记本(396.24mm)
一px305.7/1366 = 0.22(毫米)396.24/1366 = 0.29(毫米)
  • 虽然屏幕尺寸大小不一样,但可以看起来一样清晰,意味着 每毫米的像素值是一样的,但是苹果比较厉害,用更少的宽度承载或者说容下了相同数量的像素 (一像素就少了0.07毫米(少了24%的宽度))

这两个例子告诉我们,肉眼看得请不清晰,跟屏幕实际尺寸的大小没有任何关系,而是跟单位长度的像素点有决定性的关系
所以以后买电脑,需要尽量拜托宽度的误区(比如15寸就比13寸清晰),以下窃取阮一峰大大的分辨率常见解释:
这里写图片描述

对于前端开发来说,设计图是1920或者是1366并不代表是宽度,当你的网页完全按照设计图使用px来实现的话,有可能出现两种情况:
- html宽度用了设计图1366px,但无奈到了1024的电脑或者手机的时候,就会出现了横向滚动条(不够长的电脑表示:废话你的内容多了300像素老子去哪里给你要距离?)
- html宽度用了设计图1366px,到了1920的电脑上,就会出现大量的留白(不够长的网页表示: 废话你的电脑多出了550像素老子去哪里给你要内容?)

这才是我们开发者需要解决的难题
  • 11
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值