在做网页开发时 ， 经常会用CSS来为页面做样式美化 。 当定义页面的字体大小时 ， 可用的单位有px,em,rem ， 这些单位怎么用？来一起看下 。 操作方法 01 先看下html代码 ， 代码简单 ， 二个div里有二段文字 ， body的样式定义了字体的大小为16px ， px单位即为像素大小 。
02 看下页面 ， 由于div1, div2都没有定义字符的大小 ， 所以继承了body定义的字体大小 ， 为16px 。
03 添加了代码 ， 为div1, 2都添加了样式 ， d1 ， d2 ， 字体大小都设置为1.5em 。
04 运行页面 ， 看下结果 。 从图中可以看到 ， 字体变大了
05 但上面写的1.5em究竟是多大像素？其实这里的em是相对于body定义的16px的 ， 1.5em就是1.5倍的16px ， 即24px 。
我们修改下代码就可以验证出来了,把d2的字体大小从1.5em改成24px ， 如图 。
06 运行页面 ， 可以看到二段文字的大小都是一样的 ， 1.5em在这里就是为24px.
07 再次修改代码 ， 在d1的div里加一个div ， 样式为d3 ， 定义的字体大小也为1.5em.
08 运行页面 ， 同样为1.5em ， d3的字体却比d1的显示大 ， 为什么？
是由于d3的1.5em是相对d1来说的 ， 因为它是在d1里面 。 d1是24px ， d3就为24px * 1.5 = 36px了 。
09 【CSS字体单位px,em,rem的用法】无论是在哪个内容里 ， 我们都希望同样的em大小 ， 显示的字体大小都一样 ， 要怎么改？
这就要用到rem这个单位了 。 rem是相对于根节点的 ， 即相对于body节点 。
修改代码 ， 把d3的 1.5em改为 1.5rem ， 如图
10 运行页面 ， 可以看到三段文字的大小都一样了 。
以上内容就是CSS字体单位px,em,rem的用法的内容啦 ， 希望对你有所帮助哦！
猜你喜欢
- 用PS绘制金属质感字体
- word文档字体怎么变大
- 怎么样使手机屏幕的字体变大
- 如何根据图片中的字寻找相应的字体？
- 基本单位有哪些 国际基本单位有哪些
- 电脑屏幕显示字体太小，怎么放大？
- 怎样为PPT添加毛笔字体
- css怎么改变鼠标样式
- eclipse怎样设置java代码字体大小？
- 哆啦A梦风格字效设计教程