### 理論基礎 關于屏幕適配，自適應，響應式的探索。 >[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