移動端解析度+小程式的自適應單位RPX

-Advertisement-

為什麼模擬器iphone6解析度375，而設計圖一般給750 • 1個pt可以有1個px構成，也可以有2個，還可以有3個甚至更多組成• Iphone6下 2個 px才構成一個 pt 而微信小程式給出的是邏輯解析度，而設計師給的一般是物理解析度如何做不同解析度設備的自適應？• 以ip6的物理像素75 ...

為什麼模擬器iphone6解析度375，而設計圖一般給750

• 1個pt可以有1個px構成，也可以有2個，還可以有3個甚至更多組成
• Iphone6下 2個 px才構成一個 pt

而微信小程式給出的是邏輯解析度，而設計師給的一般是物理解析度

如何做不同解析度設備的自適應？
• 以ip6的物理像素750X1334為視覺稿進行設計，而在小程式中使用rpx為單位
• Ip6下 1px = 1rpx = 0.5 pt
• 使用rpx,小程式會自動在不同的解析度下進行轉換，而使用px為單位不會

為什麼要用iphone6的物理解析度來做設計圖？

因為好換算

• Ip6下 1px = 1rpx
• Ip6 plus 下 1px= 0.6rpx

不是所有的單位都適合用rpx！！！

有些文字不太適合，因為設備過小可能導致文字看不清，因此可以固定住

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

javascript中通過ID獲取元素

網頁由標簽將信息組織起來，而標簽的id屬性值是唯一的,如何通過javascript找到要獲取的元素,語法:document.getElementById("id"),運行結果值為null或[object HTMLParagraphElement]，原因在於獲取的元素是一個對象，如想對元素進行操作，我... ...
js精準計算

[toc] js精準計算 0.1 + 0.2 = 0.30000000000000004。計算精度誤差問題（和二進位相關）。對於浮點數的四則運算，幾乎所有的編程語言都會有類似精度誤差的問題，只不過在 C++/C /Java 這些語言中已經封裝好了方法來避免精度的問題，而 JavaScript 是 ...
前端基礎入門(一)-HTML-HTML基礎

一、HTML基礎語法 1.什麼是HTML HTML（Hypertext Markup language）超文本標記語言 2.HTML發展史 HTML1.0（1993IETF）→HTML2.0（1995W3C）→HTML3.2（1996W3C）→HTML4.0（1997W3C）→HTML4.0.1（1 ...
關於 JavaScript 中的 reduce() 方法

一、什麼是 reduce() ？ reduce() 方法對數組中的每個元素執行一個升序執行的 reducer 函數，並將結果彙總為單個返回值 const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => acc ...
使用JavaScript策略模式校驗表單

表單校驗 Web項目中，登錄，註冊等等功能都需要表單提交，當把用戶的數據提交給後臺之前，前端一般要做一些力所能及的校驗，比如是否填寫，填寫的長度，密碼是否符合規範等等，前端校驗可以避免提交不合規範的表單。假如我們有一個表單，校驗邏輯如下：用戶名不為空密碼長度不低於6位手機號符合格式未使用策 ...
最新報告！開源軟體及編程語言的數據調查

什麼是開源軟體由於開源軟體的分享、自由等特點受到越來越多的使用者的親睞，如今大家使用開源軟體的頻率已經越來越高。科普一下，比較常見的開源軟體例如——CentOS、 Apache(httpd)、Jboss、Tomcat、Maven、Eclipse、Spring、一些瀏覽器中的內核WebKit等。報 ...
js拷貝繼承

<script type="text/javascript"> var a = { "gender":'男', "grade":'初三', "group":'第五組', "name":'李白' }; var b = {};//創建一個空對象 for (var key in a) { // a[key ...
js繼承的封裝

<script type="text/javascript"> function extend(source, target) { for(var key in source) { var value = source[key]; target[key] = value; } } // extend ...