## 深入理解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)
- 开始
- 微信小程序
- 获取用户信息
- 记录
- HTML
- HTML5
- 文档根节点
- 你真的了解script标签吗?
- 文档结构
- 已经落后的技术
- form表单
- html实体
- CSS
- css优先级 & 设计模式
- 如何编写高效的 CSS 选择符
- 笔记
- 小计
- flex布局
- 细节体验
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物语
- js函数定义
- js中的数组对象
- js的json解析
- js中数组的操作
- js事件冒泡
- js中的判断
- js语句声明会提前
- cookie操作
- 关于javascript你要知道的
- 关于innerHTML的试验
- js引擎与GUI引擎是互斥的
- 如何安全的修改对象
- 当渲染引擎遇上强迫症
- 不要使用连相等
- 修改数组-对象
- 算法-函数
- 事件探析
- 事件循环
- js事件循环中的上下文和作用域的经典问题
- Promise
- 最佳实践
- 页面遮罩加载效果
- 网站静态文件之思考
- 图片加载问题
- 路由及转场解决方案
- web app
- 写一个页面路由转场的管理工具
- 谈编程
- 技术/思想的斗争
- 前端技术选型分析
- 我想放点html模板代码
- 开发自适应网页
- 后台前端项目的开发
- 网站PC版和移动版的模板方案
- 前后端分离
- 淘宝前后端分离
- 前后端分离的思考与实践(一)
- 前后端分离的思考与实践(二)
- 前后端分离的思考与实践(三)
- 前后端分离的思考与实践(四)
- 前后端分离的思考与实践(五)
- 前后端分离的思考与实践(六)
- 动画
- 开发小技巧
- Axios
- 屏幕适配
- 理论基础
- 思考
- flexible.js原理
- 实验
- rem的坑,为什么要设置成百分比,为什么又是62.5%
- 为什么以一个标准适配的,其它宽度也能同等适配
- 自适应、响应式、弹性布局、屏幕适配
- 适配:都用百分比?
- 番外篇
- 给你看看0.5px长什么样?
- 用事实证明viewport scale缩放不会改变rem元素的大小
- 为什么PC端页面缩放不会影响rem元素
- 究竟以哪个为设备独立像素
- PC到移动端初试
- 深入理解px
- 响应式之栅格系统
- 深入理解px(二)
- 一篇搞定移动端适配
- flex版栅格布局
- 其他
- 浏览器加载初探
- 警惕你的开发工具
- JS模块化
- webpack
- 打包原理
- 异步加载
- gulp
- 命名规范
- 接口开发
- sea.js学习
- require.js学习
- react学习
- react笔记
- vue学习
- vue3
- 工具、技巧
- 临时笔记
- 怎么维护好开源项目
- 待办
- 对前端MVV*C框架的思考
- jquery问题
- 临时
- 好文
- 节流防抖