## 深入理解px（二） ### root:fontSize 基准值 `html {font-size: 16px;}` rem 单位：元素 (all) px = `元素 rem` * `root:fontSize (px/rem) ` 默认 `root:fontSize: 100%(16px)`，此时 `1rem = 16px ; 1px = 0.0625rem` 即：`root:fontSize: 100% (16px/1rem)`。将现有的 px 单位 转换为 rem 单位时 除以 16，或者 乘以 0.0625(62.5%) 就行。 >[tip] root:fontSize 有两种值，px单位 和 百分比，**要注意的是 两个值是相互独立没有关系的，不要以为 只是百分比写法而已。** > 默认初始不写任何样式时，默认的文字字体大小为16px ---- ### 期望 这样当我们想写 10px 时 就要在脑海中做计算，计算出 (10 * 0.0625) rem； 这太麻烦了，也不够直观，我们希望 1px = 0.1rem，这样 10px = 1rem 就很好转换了，并且也非常直观。 ### 那么 合适的 root:fontSize 应该是多少？ 期望 root fontSize: 10px; 表示: 10px/1rem，10px = 1rem，1px = 0.1rem 这样是为了现有的 px 单位转换成 rem 时好计算。 ``` 16px = 16 px/rem * 1rem 16px = 10 px/rem * 1.6rem 16px 时 100% 10px 时 呢？ 1 ? 16 10 ? = 10 / 16 = 62.5% ``` 所以 10px 时 百分比为 62.5%，即 `root:fontSize: 10px;` 等价 `root:fontSize: 62.5%`; > 如果为了转换方便而去定义 “合适的” `root:fontSize` 就没必要了，现在都有工具来辅助完成转换，特别是在前端工程化的今天，这么做主要是为了适配，即根据设备、屏幕分辨率等情况自动调节 `root:fontSize` 来实现适配。 > 最好的转换比例是1:1，1px = 1rem；即 `root:fontSize: 1px(6.25%);` ### 浏览器：fons-size: 12px 为最小值，没有更小的了 不过遗憾的是，浏览器标准规定了 基准值不能小于12px，浏览器无法显示 10px 的字体大小，最小字体大小为 12px，所以 此时 1rem 也是显示 12px，所以 期望 10px = 1rem 是做不到的，即使这定义了，浏览器也会按照 最小 12px/1rem 来计算。所以 上面想 1:1 也实现不了，因为 至少 1rem = 12px; 即 至少 `root:fontSize: 12px(75%)` > 如果要实现 显示 10px 的字体大小，那么只能只用 缩放来变通实现了。 ### 注意 ```css html { font-size: 625%; /*font-size: 100px;*/ } body { font-size: 14px } ``` 如果定义了基准值，那么要设置下 body 的字体大小值，不然会影响页面上其他不使用rem且没定义字体大小的元素的字体大小，因为 找不到继承，最终继承到 html上去了。 ### 为什么要适配？ PC 端不需要适配，因为我们不希望不同大小的屏幕都显示一样多的内容，我们希望大屏能看到更多的内容，一览无余的感觉（思考，但现在pc页面都做了响应式，也要兼顾移动端，这种情况怎么办呢）。 主要是移动端需要适配，保证一份设计稿在多种屏幕 都能呈现出一致（一模一样，即 尽管在不同屏幕上，但 每个元素大小与屏幕大小的比例都是一致的）的效果，微信小程序 rpx 就是一个适配单位。 以 375px 来出设计稿，开发时按照 1px = 2rpx 进行转换就能够适配到多种屏幕，而不用去关心每个屏幕的分辨率了。 即 认为 所有设备都是 750rpx 的，其它具体分辨率无需关心即可。相当于微信充当了一个中间层，动态调节了 真实px 与 rpx 的关系，屏蔽了不同屏幕的差异性，所以我们面对一致的 rpx就可以了。 移动端 rem 适配 也是这个原理。如 设置 root:fontSize: width() / 3.75 px; 即 root:fontSize: 100px，1px = 0.01rem ### 扩展 [一篇搞定移动端适配](https://mp.weixin.qq.com/s/ysPmhr0zwscxPE3Q_xtY3w)