微信小程序設計稿pt怎麽轉rpx
阿新 • • 發佈：2019-04-24
cnblogs 我們 pen 比對 pix shu 多少 class 不能
- 什麽是邏輯分辨率？
- 什麽是物理分辨率?
- 什麽是DPI？(Dots Per Inch) 最早的時候，這個單位是用來描述打印機的性能的，意思是每英寸能打多少個墨點，毫無疑問，DPI越高，打印出來的東西就會越清晰銳利
- 什麽是PPI?（Pixels Per Inch）物理單位，像素密度，像素可以理解為LED燈屏幕上的發光點，只不過Retina顯示屏(mac)的發光密度非常高，人眼感受不到顆粒感，一塊屏幕寬高有幾寸是生產時就被定好的，而寬高能容納多少像素也是生產時就定好的，拿iphone6-7舉例 該屏幕每行有750個像素(發光點)，高(豎)有1334顆像素(發光點) PPI說的是像素密度，而分辨率說的是塊屏幕的像素尺寸，譬如說1334750就是iPhone（6~7）的分辨率，說iPhone（6~7）的分辨率是326是錯誤的表述，326是它的像素密度，單位是PPI 總結 雖然我們說像素是構成屏幕的發光的點，是物理的，但是像素在脫離了屏幕尺寸之後是沒有大小可言的，你可以將1920 1080顆像素放到一臺40寸的小米電視機裏面，也可以將同樣多的像素全部塞到一臺5.5寸的iPhone7 Plus手機裏面去，那麽對於40寸的電視而言，每個像素顆粒當然會大於5.5寸的手機的像素
- scale 縮放因子的概念 1/72inch = 1point = scale * pixel(在iphone4~6中，縮放因子scale=2, 在iphone6+中，縮放因子scale=3) 所以 在iphone3中一個pt面積只有一個像素點 在iphone4,5,6中一個pt面積被渲染成一個22的矩陣 在iphone6+中1個pt面積被渲染成33的矩陣 (一個像素對計算機而言就是能夠顯示一種特定顏色的最小區域)
- 什麽是設備像素? (Device Independent Pixels) 什麽是css像素？(CSS Pixels) 設備像素指的是設備屏幕的物理像素，任何設備的物理像素的數量都是固定的 CSS像素又稱為邏輯像素，是為web開發者創造的 程序猿編碼使用的是css像素，在桌面端，css的1個像素往往都是對應著電腦屏幕的1個物理像素，而在手機端，由於屏幕尺寸的限制，縮放是經常性的操作
- 什麽是設備像素比DPR? （Device Pixel Ratio） 它是默認縮放為100%的情況下，設備像素和CSS像素的比值 DPR = 設備像素 / CSS像素(某一個方向上) 實際上CSS像素對應的javascript屬性是screen.width / screen.height 而對於設備像素比對應的javascript屬性是window.devicePixelRatio 因此就可以使用window.devicePixelRatio * screen.width 選中iphone6機型時，該計算結果為750
- rem設置了根元素的font-size em設置了父元素的font-size
- 回到最初的問題 pt how to convert into rpx? 在微信小程序中，直接使用@2x圖進行iphone6的適配，因為iphone6的scale=2，所以1pt = 2px(css像素) 總的來說@2x圖(對應的dpr為2）的寬高標的是多少px，對應小程序中寬高寫多少rpx就可以了，最終的效果就是，你開發時在iphon6的設計稿上量了多少px，就寫多少rpx就行了，它適配了大部分機型，但是iphoneX的高rpx不能完美適配，是有留白的，此時需要通過百分比來彌補
- 參考鏈接
- https://blog.csdn.net/phunxm/article/details/42174937
- http://www.cnblogs.com/xiaohuochai/p/5494624.html
- https://www.zhihu.com/question/40506180
- https://www.zhihu.com/question/26195746
- https://www.jianshu.com/p/1b69f0df78f3
微信小程序設計稿pt怎麽轉rpx