### 理论基础 关于屏幕适配，自适应，响应式的探索。 >[info] 我们活在一个由像素组成的世界里面  **知识要点：** - 像素 - 像素点 - 逻辑像素 - 设备像素 - 物理像素(physical pixel) - 设备像素比(device pixel ratio ) - 设备独立像素(density-independent pixel) - 点 - css像素 - 像素密度 - 屏幕尺寸 - 分辨率 - 逻辑分辨率 - 物理分辨率 - css分辨率 - 英寸、尺寸 * * * * * **理解：** 1. 屏幕尺寸表示了屏幕的大小，5.2英寸表示屏幕对角线的长度（勾股定理）。 2. 像素是分辨率的单位，是没有实际的物理尺寸的，分辨率1920px*1080px的意思就是，在这个华为荣耀7的5.2英寸屏幕上，在竖向的高度上有1920个像素块，在横向的宽度上有1080个像素块。所以**分辨率表示了屏幕所拥有的像素数量。** 3. 屏幕像素密度，即每英寸屏幕所拥有的像素数，英文简称PPI。（即在一个对角线长度为1英寸的正方形内所拥有的像素数。） **物理像素(physical pixel)** 即设备像素，一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。买手机时那些销售告诉你的分辨率就是这个。 （这个行业还有一个毛病，分辨率本事设备的横向和纵向的像素数量，也就是宽和高，比如坚果3的分辨率应该是：1080x2160像素，但是销售时为了好看，商家逗将大数字放在了前面，写成2160x1080像素，这样更吸引人嘛，久而久之，大家都习惯这么做了，真是无语了） **设备独立像素(density-independent pixel)** 设备独立像素(也叫密度无关像素)，别名叫做点（是一个单位），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素（程序只用管理虚拟像素，虚拟像素到物理像素的映射不需要我们负责）。（一个点里面可以放多个像素，并且设备独立像素还可以被改变的，比如通过缩放，视口缩放和浏览器的缩放） 所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。 **设备像素比(device pixel ratio )** 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到： **CSS像素** 比如用于浏览器中的网页布局，CSS像素也是一种设备独立像素，也称为屏幕无关像素。 **设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向** 在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。 在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。 **PPI(Pixels Per Inch,每英寸所拥有的像素数目)** 分为横向和纵向 注：DPI原本是印刷上的记量单位，意思是每英寸上，所能印刷的网点数（Dot Per Inch）。随着数字设备快速发展，大多数的人也将数字影像的解析度用DPI表示，但印刷时计算的网点（Dot）和电脑显示器的显示像素（Pixel）并不相同，所以专业人士会用PPI(Pixel Per Inch)表示数字影像的解析度，以区分二者。 **视网膜屏幕** 什么样的屏幕叫视网膜屏幕呢？ **2K** 我们经常看见的2K、4K、1080P、HD、蓝光等代表什么意思呢？ * * * * * 参考资料： - [重新認識 Pixel、DPI / PPI 以及像素密度 | INFOLINK Blog](https://blog.infolink.com.tw/2021/rediscover-pixel-dpi-ppi-and-pixel-density/) - [像素的世界及其在web开发制作中的应用 « 张鑫旭-鑫空间-鑫生活](http://www.zhangxinxu.com/wordpress/2009/12/像素的世界及其在web开发制作中的应用/) - [设备像素比devicePixelRatio简单介绍 « 张鑫旭-鑫空间-鑫生活](http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/) - [【全解析】屏幕尺寸，分辨率，像素，PPI之间到底什么关系？ - 站长之家](http://www.chinaz.com/manage/2015/0902/441624.shtml) - [javascript检测浏览器的缩放状态实现代码](http://www.jb51.net/article/55753.htm) - [CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系 - 草珊瑚 - 博客园](http://www.cnblogs.com/samwu/p/5341056.html) - [理解逻辑像素，搞定设计尺寸](https://sanwen8.cn/p/1bcT7cC.html) - [关于CSS中的PX值（像素） - i技术宅 - 博客园](http://www.cnblogs.com/xujanus/p/5659800.html) - [CSS Pixel与绝对像素](http://www.jianshu.com/p/bb76c606f0b4) - [移动端web页面知识小结之像素、物理像素、逻辑像素](http://blog.csdn.net/aiolos1111/article/details/51880223) - [(4)移动端页面布局及字体大小该如何设置 - web开发 - SegmentFault](https://segmentfault.com/a/1190000004344753) - [像素和CSS媒体查询?](https://www.zhihu.com/question/28082877) - [HTML meta viewport属性说明(mark)](http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html) - [像素密度的危机](http://www.cnblogs.com/rubylouvre/archive/2013/01/16/2862499.html) - [(4 条消息)DPI、PPI、DP、PX 的详细计算方法及算法来源是什么？ - 知乎](https://www.zhihu.com/question/21220154) - [位图和矢量图的区别_百度知道](https://zhidao.baidu.com/question/625369.html) - [1 pt 的图形大小与其在屏幕上显示出的大小之间有什么关系？ - 知乎](https://www.zhihu.com/question/19851058) - [CSS布局基础之二认识Viewport](http://www.cnblogs.com/samwu/p/5421110.html) - [移动前端开发之viewport的深入理解](http://www.cnblogs.com/2050/p/3877280.html) - [移动端Web系列3 -- viewport](https://segmentfault.com/a/1190000000649029) - [使用Flexible实现手淘H5页面的终端适配 #17](https://github.com/amfe/article/issues/17) - [移动端高清、多屏适配方案](http://div.io/topic/1092) - [前端工程师需要明白的「像素」](http://www.jianshu.com/p/af6dad66e49a) - [CSS3的REM设置字体大小](http://www.w3cplus.com/css3/define-font-size-with-css3-rem) - [CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport](https://github.com/jawil/blog/issues/21) >[info] 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 - [移动端页面自适应解决方案— rem 布局篇](http://mp.weixin.qq.com/s/WIHbbfUesuo_uirdIiPTWA) - [一篇真正教会你开发移动端页面的文章(一)](http://mp.weixin.qq.com/s/cPxopjL4RIrfbFRfzOzFqg) - [一篇真正教会你开发移动端页面的文章(二)](http://hcysun.me/2015/10/19/%E4%B8%80%E7%AF%87%E7%9C%9F%E6%AD%A3%E6%95%99%E4%BC%9A%E4%BD%A0%E5%BC%80%E5%8F%91%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%87%E7%AB%A0-%E4%BA%8C/) - [移动端适配：font-size设置的思考](https://www.cnblogs.com/axl234/p/5156956.html) [这一次要帮你彻底搞明白px、ppi、dot、dpi、sp、dp、pt](https://www.toutiao.com/a6497443414273950221/?tt_from=weixin&utm_campaign=client_share&app=news_article&utm_source=weixin&iid=12619555732&utm_medium=toutiao_android&wxshare_count=1) [移动端webapp开发必备知识-【科e互联】](http://www.internetke.com/tutorial/html5/2014/0928/640.html) * * * * * [为什么用手机拍屏幕总会出现波纹？今天终于明白了](http://www.365yg.com/group/6451086119689519374/) [科普时间-LED显示屏的制作原理](http://www.365yg.com/group/6369530139207057666/) [专业讲解，成像原理与相机结构](http://www.365yg.com/group/6316244519260766466/) [为什么老式电视比液晶电视伤眼睛，高速摄像机为你揭开其中奥秘](https://www.ixigua.com/i6514458568677130765/?utm_source=toutiao&utm_medium=feed_stream#mid=83935140651) [视觉暂留详解：请不要相信你的眼睛，片头试验很神奇，请配合哦](https://www.ixigua.com/i6515684983825236493/?utm_source=toutiao&utm_medium=feed_stream#mid=83935140651) ~~~ 其实代码的本质就是控制硬件，比如在显示器上显示一个点，其实是程序对某个硬件进行赋值操作（不同的硬件设备在程序里有着不同的地址，这就是总线结构），所以你要在屏幕上画个点，本质上就是往某个地址上写个值，简单来说就是这样。这个东西也叫作驱动程序。通过控制屏幕显示各种各样不同的点，我们就可以弄出各种图案，比如窗口啊，按钮啊，文字啊，图片啊，2D或者3D动画啊，这个东西就叫作计算机图形学。 作者：Hello特特 链接：https://www.zhihu.com/question/35391145/answer/62624970 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 ~~~ [浏览器UA在线查询、浏览器参数检测](http://www.sunchateau.com/free/UA.htm) [分辨率与像素你应该知道的！](https://m.baidu.com/sf_baijiahao/s?id=1606419003389991315&wfr=spider&for=pc) [移动端的那些坑](https://mp.weixin.qq.com/s/pVGFcVWmn5o-tD6hrdksUQ) > 不用响应式媒体查询，也不用百分比适配，只需要以一套代码就能满足所有尺寸的屏幕屏幕，例如 让页面在 iphone6 - iphone8 有相同的展示效果。 [不要再问我移动适配的问题了](https://mp.weixin.qq.com/s/1LTiF3BA3zV-BLNHwrPSzw) [UI设计教程：APP切图适配规范](https://m.toutiaoimg.cn/group/6337139493007556865/?iid=33124962994&app=news_article_lite&timestamp=1532631829&wxshare_count=1&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_android&utm_campaign=client_share) > 设计眼中的程序员，看她们切图时是怎么想我们的。 > 适配不要和响应式一起做，单独做移动端页面时才用适配，也就是自适应时才做适配，不然pc页面做响应式还要做适配很麻烦。 [从网易与淘宝的font-size思考前端设计稿与工作流](http://www.imooc.com/article/35542) [趣图：后端工程师调试 CSS](https://mp.weixin.qq.com/s/at6zTe0g332W0yDf7kbiwA) [为什么安卓的手机普遍没有苹果的屏幕清晰](https://tieba.baidu.com/p/4206510606?referer=tieba.baidu.com&pn=0) [使用 rem 设置文字大小](http://www.woshipm.com/ucd/24110.html) [一篇搞定移动端适配](https://mp.weixin.qq.com/s/ysPmhr0zwscxPE3Q_xtY3w) * * * * * last update：2018-7-13 22:46:40