🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 深入理解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)