[TOC] [微信小程序~CSS樣式](https://www.jianshu.com/p/a445e7326b2c) # [小程序布局](https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=00080e799303986b0086e605f5680a) 微信小程序開發時用的是前端的技術，類似html的組件標簽，css，js，他面臨的問題和網頁一樣，就是不同寬度的設備的適配，解決思路當然也是一樣，但是有一點不同的是**不能用rem，為什么呢，因為根本就沒有html元素啊**，咋解決，很簡單，我不基于html的font-size了，我基于一個別的值就行了，你也不需要計算這個值，我給你計算了，這就是`rpx`。 最終的效果就是，你開發時**在iphon6的設計稿上量了多少px，就寫多少rpx就行了，完美適配**，perfect！ # rem 在做移動端適配是最常用的方法就是使用rem作為單位，因為rem是根據html的fontsize去動態計算實際的px的。所以常常應用這點，做反向使用。 即根據屏幕大小動態的設置fontsize。來達到不同的分辨率下有一樣的效果。 # rpx rpx其實是微信對于rem的一種應用的規定，或者說一種設計的方案，官方上規定屏幕寬度為20rem，規定屏幕寬為`750rpx`。所以在微信小程序中`1rem=750/20rpx`。 在使用rem時，我們常常讓設計師根據iphone6的標準出設計稿。 因為如果以iphone6為標準，并且在iphone6上將fontsize設置成`62.5%`。 那么1rem就等于10px，我們只要將設計師標注的尺寸（一般標注的是物理分辨率）除以20就可以得到單位為rem的數值了。在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則`750rpx = 375px = 750物理像素`，`1rpx = 0.5px = 1物理像素`。 css中的px與設備的物理像素并非絕對的一比一關系。 px與物理像素的比例與設備的dpr（像素倍率）有關。 **rpx稱為相對像素值，rpx與物理像素也并非絕對的一比一關系**。 wxss將設備寬定義為750rpx，是以iPhone6的分辨率（750x1334）為基準劃分的。 也就是說，在iPhone6上，1rpx=1物理像素=0.5px。 因為**設計師標注的尺寸一般是物理分辨率**。所以**如果以iphone6為標準出設計稿（750x1334）的話，那么我們就可以不需要經過換算直接標準rpx**。 ***** 建議使用 [Taro ](https://nervjs.github.io/taro/docs/size.html)時，設計稿以 iPhone6 `750px` 作為設計尺寸標準。 # 小結 * 建議小程序的設計稿以 iphone6的物理像素 `750 x 1334`為視覺稿設計，在小程序中使用`rpx`為單位 * 在ip6下 `1px = 1rpx = 0.5pt` * 使用`rpx`為單位小程序會在不同分辨率下進行轉換，而`px`則不會 * 有的時候文字部分不適合用`rpx`來表示 # 來源：簡書 鏈接：https://www.jianshu.com/p/e8b66de2b7b5