博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS——字体大小最常用的单位
阅读量:5114 次
发布时间:2019-06-13

本文共 1080 字,大约阅读时间需要 3 分钟。

  • px (像素): 将像素的值赋予给你的文本。这是一个绝对单位, 它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的。
  • ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话,比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素,这可能会变得棘手, 但它是可行的,如下图所示。为什么要使用这个麻烦的单位呢? 当你习惯这样做时,那么就会变得很自然,你可以使用em调整任何东西的大小,不只是文本。你可以有一个单位全部都使用 em 的网站,这样维护起来会很简单。
  • rems: 这个单位的效果和 ems 差不多,除了 1rem 等于 HTML 中的根元素的字体大小, (i.e. ) ,而不是父元素。这可以让你更容易计算字体大小,但是遗憾的是, rems 不支持 Internet Explorer 8 和以下的版本。

元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——开始,浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素),会有一个最终的大小值:16px。其他元素也许有默认的大小,比如 元素有一个 2ems 的默认值,所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时,事情会变得棘手。比如,如果你有一个  元素在你的页面上,然后设置它的 font-size 为 1.5ems (通过计算,可以得到大小为 24px),然后想让 <article> 元素中的段落获得一个计算值为 20px 的大小,那么你应该使用多少 em。

你需要将 em 的值设置为 20/24, 或者 0.83333333ems. 这个计算可能比较复杂,所以当你设置的时候,你需要仔细一些。如果可以使用 rems 的话,那实现起来就变得简单不少,避免在可能的情况下设置容器元素的字体大小。

当调整你的文本大小时,将文档(document)的基础  font-size 设置为10px往往是个不错的主意,这样之后的计算会变得简单,所需要的 (r)em 值就是想得到的像素的值除以 10,而不是 16。做完这个之后,你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意,这样它们就可以很容易被找到。

原文地址:

转载于:https://www.cnblogs.com/songsongblue/p/10655946.html

你可能感兴趣的文章
jdk8 Function
查看>>
第二次作业
查看>>
迷茫中的自己
查看>>
burp suite 的intruder 四种攻击方式
查看>>
机器学习----人脸对齐的算法-ASM.AAM..CLM.SDM
查看>>
自定义文本选中样式
查看>>
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
查看>>
uva 387 A Puzzling Problem (回溯)
查看>>
默认参数和命名关键字参数(1)
查看>>
模拟客户端浏览器-1
查看>>
正则校验
查看>>
十大PHP程序员必备工具
查看>>
使用excel2003中的solver解决最优化问题
查看>>
CDR案例:广告条幅banner设计
查看>>
【贪心】 【HDU 5821】 Ball
查看>>
.NET性能优化方面的总结(转)
查看>>
关于jmeter 加载jar文件的疑问
查看>>
poj2186【利用强连通分量】
查看>>
HDU1829【种类并查集】
查看>>
搭建nuxtjs程序 —— 用户信息 or token怎么不丢失
查看>>