国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序中rpx與rem單位使用

lwx12525 / 3065人閱讀

摘要:小程序畢竟出來不久,以上言論有的屬于官方文檔,有的屬于自己瞎捉摸,大家不能全信,要自己測了才知道

原作者: 小小小 來自: 授權地址

本文講解rpx和rem應用于微信小程序,如果你還沒有入門,建議先從下面看起:

微信小程序官方文檔
web app變革之rem
rpx單位官方文檔
rpx單位基礎介紹

如果看完上面幾篇文章,我們開始進入正題吧~~

一、rem的使用

1) js中導入下面這段代碼

(function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + "px";
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

2) 根據設計稿寬度算出rem和px直接的轉換公式

例如:
640px的設計稿,轉換公式就是按照上面js中這句而來【docEl.style.fontSize = 20 * (clientWidth / 320) + "px"】,最終 1rem = 20 x 640/320 + "px" = 40px;

3)根據設計稿按照1rem = 40px 對著各個元素進行單位轉換

例如:
我們測量一個元素寬度是400px,那么最終css中這樣寫 width:400/40 = 10rem


正常情況下rem的使用

二、rpx的使用

1)小程序中rpx與px的轉換

例如:設計稿750px寬度
那么恭喜您,你ps上量出寬度是多少,那么你就定義多少rpx,也就是 1px = 1rpx

例如:設計稿640px寬度
那么很遺憾,你需要轉換一下 1px = 750/640 rpx


小程序中rpx和px的轉換

2)小程序中如何繼續使用rem

例如:設計稿750px寬度
此時1rem = (750/20)rpx = 37.5px

例如:設計稿640px寬度
此時1rem = (750/20)rpx = 32px


小程序中rem的使用

注意:無論設計稿多少,rem與rpx換算總是一樣的,但是rem與px在小程序中換算是 rem =
設計稿寬/20,這一點與我們平時使用的rem完全不一樣。

小程序畢竟出來不久,以上言論有的屬于官方文檔,有的屬于自己瞎捉摸,大家不能全信,要自己測了才知道~~

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/66291.html

相關文章

  • 信小程序rpxrem單位使用

    摘要:小程序畢竟出來不久,以上言論有的屬于官方文檔,有的屬于自己瞎捉摸,大家不能全信,要自己測了才知道 原作者: 小小小 來自: 授權地址 本文講解rpx和rem應用于微信小程序,如果你還沒有入門,建議先從下面看起: 微信小程序官方文檔web app變革之remrpx單位官方文檔rpx單位基礎介紹 如果看完上面幾篇文章,我們開始進入正題吧~~ 一、rem的使用 1) js中導入下面這段...

    Cobub 評論0 收藏0
  • 信小程序單位rpx自適應布局

    摘要:布局上面四個方法,各有優缺點,現在回頭看看微信的,相信大家已經有所啟發,實際上就是系統級的把頁面按比例分割份,,或者伸縮布局的。也就是說,微信小程序的布局幫大家把布局的設置根元素字體尺寸這步省了,或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個單位,按官方的定義,rpx可以根據屏幕寬度進行自適應,在rpx出現之前,web頁面的自適應布局已經有了多種解決方案,為什么微信...

    LeviDing 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<