html
css
电脑
编辑器：vscode
px：设备屏幕的像素，浏览器的默认字体高都是 16pxem：相对于父元素的比例 （会继承父级元素的字体大小，代表倍数。继承的是计算公式，不是值）rem：相对于根元素的比例 （始终是基于根元素 ，代表倍数。继承的是计算公式，不是值） ① rem 要比 em 更好设置, ② 但是rem 不兼容低级浏览器，为了兼容不支持 rem 的浏览器 ③ 需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器 可以优雅降级。 ④ 如果用户群都使用最新版的浏览器，那推荐使用 rem， 如果要考虑兼容性，那就使用 px，或者两者同时使用。rpx： rpx是微信小程序推出的一个单位（更好适配手机端）
px 是最基本的尺寸，就是设备的像素。通常我们说的电脑分辨率，就是像素的问题。
问题： 怎么让 Chrome支持小于12px 的文字谷歌浏览器中，默认的中文汉字最小字体是12px，不管你设置成 8px 还是 10px，在浏览器中只会显示 12px（以前的问题，现在应该已经支持了，如果遇到这个问题可以这样解决）```HTML
10px
```em 的使用是相对于其父级的字体大小的，即倍数。浏览器的默认字体高都是 16px，未经调整的浏览器显示 1em = 16px。①浏览器默认字体 16px = 1em = 100%(浏览器默认字体，关系不是很好转换) 假设我们父元素给的是 22px，子元素需要设置为 14px， 我们就需要 14/22=0.63636364em（关系不是很好计算）② 浏览器会忽略小数 1.2em = 19.2px 实际上会是 19px 的效果 如果设置 1.2em 则变成 19.2px,问题是 px 表示大小时数值会忽略掉小数位的。鉴于上面两个问题的存在，通常会人为地使 1em = 10px。也就是认为的去修改浏览器的默认值 16px = 1em = 100%，使得它成为 10px = 1em
问题：如何使得 160px = 1em = 100%浏览器的默认值 16px = 1em = 100%，使得它成为 10px = 1em 。看这两个等式，我们就知道要使得 px 与 em 之间做改变，name就是借助 % 来作为桥梁。使得 1em = 10px = 62.5%，就可以让 1em = 10px```CSShtml，body { font-size: 62.5%;}```因为默认时字体 16px = 100%，则有 10px = 62.5%。所以首先在 html 中全局声明 font-size=62.5%=10px，也就是定义了网页 body 默认字体大小为 10px，由于 em 有继承父级元素字体大小的特性，如果某元素的父级没有设定字体大小，那么它就继续了 body 默认字体大小 1em = 10px。注意：继承的是公式，不是计算结果值```CSShtml { font-size: 62.5%; /* 使得 1em = 10px */}span { font-size: 1.6em;}``````HTML
```结果：外层 `` 为 html 字体 10px 的 1.6倍 = 16px，内层 `` 为外层内容字体 16px 的 1.6倍 = 25px（或26px，不同浏览器取舍小数不同）。明显地，内部 `` 内的文字受到了父级 `` 的影响。基于这点，在实际使用中给我们的计算带来了很大的不便。`因此 rem 的产生`rem 的出现再也不用担心还要根据父级元素的 font-size 计算 em 值了，因为它始终是基于根元素 `` 的。每次都根据根元素 html 的值来计算就可以了，没有上面 em 每次都根据自己的父元素来慢慢计算，那样复杂的计算，浏览器的默认值 16px = 1em = 100%，使得它成为 10px = 1em ```CSShtml {font-size: 62.5%;}```注意：继承的是公式，不是计算结果值```CSShtml {font-size: 62.5%; /* 使得 1em = 10px */}span {font-size: 1.6rem;font-size: 16px; /* 由于 rem 并没有兼容所有的浏览器，如果是低级浏览器的话就不要用 rem 了吧，实在用了的话， 要加上 font-size: 16px; 也就是 px 的单位来兼容低版本的浏览器 例如 要想兼容 IE7 和 IE8，你还是需要使用 px 来做单位。*/}``````HTML
```结果：内外 的内容均为 16px。注意： 有的时候只有 em 有效，rem 无效的！！！！！！！！！！！！！！首行缩进与行高使用 em 有效。使用 rem 就是无效的。```CSS