如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
前端、UI设计师需要知道的px，em，rem，rpx单位
来源：互联网
2023-03-16 19:13:40 70
前端工程师，UI设计师，程序员遇到的单位 px，em，rem，rpx，我们来一一了解，知道如何去选择适合的单位。
工具/原料
- html
- css
- 电脑
- 编辑器：vscode
一、几种单位介绍
px：设备屏幕的像素，浏览器的默认字体高都是 16px
em：相对于父元素的比例
（会继承父级元素的字体大小，代表倍数。继承的是计算公式，不是值）
rem：相对于根元素的比例
（始终是基于根元素 html> ，代表倍数。继承的是计算公式，不是值）
① rem 要比 em 更好设置,
② 但是rem 不兼容低级浏览器，为了兼容不支持 rem 的浏览器
③ 需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器 可以优雅降级。
④ 如果用户群都使用最新版的浏览器，那推荐使用 rem，
如果要考虑兼容性，那就使用 px，或者两者同时使用。
rpx：rpx是微信小程序推出的一个单位（更好适配手机端）
二、px
px 是最基本的尺寸，就是设备的像素。
通常我们说的电脑分辨率，就是像素的问题。
问题：怎么让 Chrome支持小于12px 的文字
谷歌浏览器中，默认的中文汉字最小字体是12px，不管你设置成 8px 还是 10px，在浏览器中只会显示 12px（以前的问题，现在应该已经支持了，如果遇到这个问题可以这样解决）
```HTML
style>
p span{
font-size:10px;
transform: scale(0.8);
-webkit-transform:scale(0.8);
}
/style>
span> 10px/span>
/
```
三、em
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
```CSS
html，body {
font-size: 62.5%;
}
```
因为默认时字体 16px = 100%，则有 10px = 62.5%。所以首先在 html 中全局声明 font-size=62.5%=10px，
也就是定义了网页 body 默认字体大小为 10px，由于 em 有继承父级元素字体大小的特性，如果某元素的父级没有设定字体大小，那么它就继续了 body 默认字体大小 1em = 10px。
注意：继承的是公式，不是计算结果值
```CSS
html {
font-size: 62.5%; /* 使得 1em = 10px */
}
span {
font-size: 1.6em;
}
```
```HTML
body>
!-- 1em = 10px -->
span>
!-- 1.6em = 10px *1.6 = 16px -->
span>
!-- 1.6em = 16px * 1.6 = 25.6 = 25px 或者 26px （不同浏览器取舍小数不同）-->
/span>
/span>
/body>
```
结果：外层 `span>` 为 html 字体 10px 的 1.6倍 = 16px，内层 `span>` 为外层内容字体 16px 的 1.6倍 = 25px（或26px，不同浏览器取舍小数不同）。
明显地，内部 `span>` 内的文字受到了父级 `span>` 的影响。基于这点，在实际使用中给我们的计算带来了很大的不便。`因此 rem 的产生`
四、rem
rem 的出现再也不用担心还要根据父级元素的 font-size 计算 em 值了，
因为它始终是基于根元素 `html>` 的。每次都根据根元素 html 的值来计算就可以了，没有上面 em 每次都根据自己的父元素来慢慢计算，那样复杂的计算，
浏览器的默认值16px = 1em = 100%，使得它成为10px = 1em
```CSS
html {
font-size: 62.5%;
}
```
注意：继承的是公式，不是计算结果值
```CSS
html {
font-size: 62.5%; /* 使得 1em = 10px */
}
span {
font-size: 1.6rem;
font-size: 16px;
/* 由于 rem 并没有兼容所有的浏览器，如果是低级浏览器的话就不要用 rem 了吧，实在用了的话，
要加上 font-size: 16px; 也就是 px 的单位来兼容低版本的浏览器
例如 要想兼容 IE7 和 IE8，你还是需要使用 px 来做单位。*/
}
```
```HTML
!-- rem 不管嵌套多少层，都是相对 html 的倍数 -->
body>
!-- 1em = 10px -->
span>
!-- 1.6rem = 10px *1.6 = 16px -->
span>
!-- 1.6rem = 10px *1.6 = 16px -->
/span>
/span>
/body>
```
结果：内外 span> 的内容均为 16px。
注意： 有的时候只有 em 有效，rem 无效的！！！！！！！！！！！！！！
首行缩进与行高使用 em 有效。使用 rem 就是无效的。
```CSS
style>
p {
text-indent: 2em;
line-height: 1.5em;
}
```
五、rpx
rpx 是微信小程序的尺寸单位，为了适应广大的前端开发者，微信小程序的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发小程序，微信开发者对 CSS 进行了扩充以及修改。
* 尺寸单位(也就是 rpx 单位的使用)
* 样式导入
rpx (responsive pixel)
可以根据屏幕宽度进行自适应。
规定手机屏幕宽为 750rpx。就是所有手机的屏幕宽度均为 750rpx 的大小。
具体的手机屏幕是多少 px ，要与 rpx 计算
如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素
```BASH
# 设备 rpx 换算 px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
# iPhone5 1rpx = 0.42px 1px = 2.34rpx
# iPhone6 1rpx = 0.5px 1px = 2rpx
# iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx
```
六、如何选择
px：设备屏幕的像素，浏览器的默认字体高都是 16px
em：相对于父元素的比例
（会继承父级元素的字体大小，代表倍数。继承的是计算公式，不是值）
rem：相对于根元素的比例
（始终是基于根元素 html> ，代表倍数。继承的是计算公式，不是值）
① rem 要比 em 更好设置,
② 但是rem 不兼容低级浏览器，为了兼容不支持 rem 的浏览器
③ 需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器 可以优雅降级。
④ 如果用户群都使用最新版的浏览器，那推荐使用 rem，
如果要考虑兼容性，那就使用 px，或者两者同时使用。
rpx：rpx是微信小程序推出的一个单位（更好适配手机端）
rem 是 em 的升级，要用的话就选择 rem 了，不要再去选择 em。
但是 px 与 rem 怎么选择。rem 不兼容低级版本的浏览器，也看 UI 设计师怎么设计吧。用的多的还是 px。
注意事项
- 实际选择使用：UI 设计师要根据各种终端来选择适用的单位
- 实际选择使用：前端工程师要根据 UI 设计师以及终端来选择
- 有问题可以留言哦~
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTML
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 437 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)