[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