今天看看来研究下微信小程序没人关注的的东西：em 和 rem
|
基本上，在微信小程序里面很多人用的都是rpx作为单位，但是小程序里面也可以用em 和 rem 作为单位，只不过他们相对于rpx来说看起来是有点麻烦了些。自己就来摸索下若果使用相对单位的时候，是个什么样的机制。 首先 ，在宽度为320px的宽度下。先上一段
图如下
然后，在宽度375px的宽度下，如果是上面的那个结构的话， 显示出来的效果是这样的，
这个时候如图显示
上述结果就是成立的。 上面的18.75px是怎么来的？在这里，设定一个当前字体默认数值N 宽度为w 则 宽度数值 与 字体默认数值之比为W/N 这个时候会发现，320px宽度的时候这个比值为20，把这个套用在375px宽度的时候 是18.75px 360px的宽度的时候是18px 414px的宽度的时候是20.7px 在不同的宽度下，仅仅针对根节点的文字大小的时候，这个时候1rem=1em 等于当前宽度的默认字体大小的数值规则的。 在官方手册文档中 可以得到rpx与px关系。那是否跟上述有关系呢，这里继续在来看下。 因为每个宽度下不设定字体都有个默认的字体的大小。所以用rpx与px的关系来测测看。 320px宽度时 16px=37.5rpx 360px宽度时 18px=37.5rpx 375px宽度时 这里就是出现了一个问题 上面两个宽度是整除数 到了这个宽度的时候，是18.75px，此时的px与rpx规则下18px=36rpx是成立的。也是是说18.75px=37.5rpx才对 但是，在设置37.5rpx的时候我通过调试面板来观察，但是这个时候 去不是18.75px的字体大小而是18px。。。。 再来看看412px的宽度 这时候的字体大小20.6px=37.5rpx；转到调试面板的时候却发现依旧如此，小数点后面的被去掉了。但是，每个宽度下的根据规则得出的rpx的值却是一定的。 所以从上面看出，使用rpx的的单位在不同的单位下面，他的值是一样的，但是使用rem 或者 em的时候，此时的rpx的值跟rem/em的值还是有些出入的。 最后说下，上述的测试也许不是很严谨，但是，最好在编写小程序的时候用rpx最好。这个测试看看就好，没必要深究。 |
在图里面我们可以看到，视图里面的字体大小也是一样大小的，也就是说，在这个宽度下，16px=1rem=1em。
从上面的图看出来，在这个宽度下，上述的结果是不成立。但是，在这个宽度下，18.75px=1rem=1em.
