H5前端的关于像素解释

场景：
人物：前端实习生「阿树」与切图工程师「玉凤」
事件：设计师出设计稿，前端实现页面
玉凤：树，设计稿发给你啦，差那么点像素，就叼死你┏( ￣へ￣)=☞
阿树：_{(>_<)}毛问题噶啦~
阿树：哇靠，为啥你给的设计稿是640px宽，iPhone 5不是320px宽吗？？？
玉凤：A pixel is not a pixel is not a pixel, you know ?
阿树：(#‵′)，I know Google。。。
为什么会出现以上的情况，难道他们当中一位出错了，摆了这样的乌龙？
事实上，他们都是对的，只是谈的不是同一个「像素」。

此像素非彼像素

设备像素(device pixel):
设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。

CSS像素(css pixel):
CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。

比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

设备像素与CSS像素之间的换算是如何产生的呢？
这就需要要谈到每英寸像素(pixel per inch)和设备像素比(device pixel ratio)。
每英寸像素(pixel per inch)：
ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素
设备像素比(device pixel ratio)：
以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。

由上图可知，ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

想要了解主流移动设备的设备像素比(device pixel ratio)可以参考以下两个网站：
http://screensiz.es/
http://www.devicepixelratio.com/
最后关于设计师和前端工程师之间如何协同：
一般由设计师按照设备像素(device pixel)为单位制作设计稿。
前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。

H5前端的关于像素解释相关推荐

H5前端学习之一HTML和CSS基础认识
前言我是一个转行的前端小白,大专非计算机专业毕业,所以对计算机很不擅长,但是对信息技术的好奇,让我对技术党尤为崇拜,既然好奇代码和崇拜技术,不如成为它!所以我来学习了当前教主流的--前端.初学前端, ...
五款轻量级的web前端框架和H5前端框架
目前主流的web前端框架有:Bootstrap.妹子UI.MUI移动前端框架等之外,国内的一些前端大神和前端大神团队琢磨出了以下几个不错的web前端框架. 第一款前端框架:FrozenUI – 专注于 ...
移动H5前端性能优化指南[转]
移动H5前端性能优化指南米随随2015.01.23 移动H5前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
H5前端性能测试快速入门
说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试.那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道:H5 ...
移动端，h5页面1px 1像素边框过粗解决方案
移动端,h5页面1px 1像素边框过粗解决方案参考文章: (1)移动端,h5页面1px 1像素边框过粗解决方案 (2)https://www.cnblogs.com/uimeigui/p/12150 ...
10大H5前端框架（转）
10大H5前端框架作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被 ...
H5前端性能测试点及优化方法
1.背景随着H5的普及和运用,它深深影响着我们各个业务的发展和用户体验,影响H5性能因素有多种:网络带宽.DNS解析时间.服务器处理能力.服务器和客户端的软硬件配置.网页内容.数据库操作.引用其他网 ...
java 菲律宾招聘_[菲律宾 -没有语言要求，汉语流利就行] 招聘： H5 前端开发工程师/ Java 开发工程师/ Python 工程师，提供住宿...
H5 前端开发工程师职位描述: 1. 参与前端架构体系的规划.设计.建设: 2. 参与前端项目架构体系的搭建: 3. 参与网站性能优化.产品体验优化.以及产品功能迭代: 4. 参与 HTML5 等前 ...
尚硅谷h5前端开发视频
尚硅谷h5前端开发视频尚硅谷h5前端开发视频尚硅谷h5前端开发视频下载地址:百度网盘
前端游戏开发和h5前端开发_人们不告诉您有关前端开发的10件事
前端游戏开发和h5前端开发介绍 (Intro) Front-end development involves the building of webpages and user interfaces ...

H5前端的关于像素解释

此像素非彼像素

H5前端的关于像素解释相关推荐

最新文章

热门文章