标签：布局 帮助 响应式 场景 外部 颜色 style bsp 方式
CSS单位主要分析em、rem、fr这三个较难理解的单位吧，平常的px、%、cm那些就不谈了嘛。
px在不同场景之下为同样的值，我们把它称作绝对单位，而em和rem受外部因素的影响下而改变，因此称作相对单位。
我们需要了解到为什么要拓展em，rem这样的相对单位呢？
比如我就特爱用px，感觉所有的东西都能用px来表现距离，而事实上这种做法早已跟不上时代的步伐了，随着更高分辨率的显示器出现，则需要原本的多栏定宽布局，则需要更加灵活多变的响应式布局。
em是最常见的相对长度单位，这是排版中使用的一种度量方式，基准值是当前元素的字号大小。 在CSS中，1em表示当前元素的字号大小，实际值取决于在哪个元素上应用。
以px为单位的基础字号大小，但希望把它改用em声明，下面有个简单的计算公式：目标em值 = 目标像素值 / 父元素（被继承元素）像素值。
重点就是以父级字号小心进行相对子级的大小变换，但这需要注意到的是不仔细的人还是少采用em为好，当em遇上font-size，事情会变得很复杂。
rem-“font size of the root element”，w3c对于rem的一句描述，rem比em多的一个r也就是root。
前面我们知道em这单位是相对于父级设置字体大小，而rem是相对于根html设置字体大小。
总的来说做响应式布局em和rem是不错的选择，不过我更倾向于rem，给html设置好字体大小，后面的元素可以使用确定的rem了。
fr，这个单位主要运用于grid布局中。
而我在学习grid布局的过程中，就一直不明白fr这单位到底是个怎样的单位？它有什么样的作用？
fr单位可以帮助我们创建一个弹列的网格轨道，它代表了网格容器中可用的空间（就像Flexbox中无单位的值）。
当fr与其他单位结合一起用时，fr是基于网格容器可用空间来计算。
注意是剩余可用空间，fr的好处也是帮助我们省去了一部分计算的麻烦。
举个例子：
grid-template-columns: 1fr 1fr 2fr;
就如这串代码，网格列，它就将剩余的空间分成了4部分，其中前两列占1份，后两列占2份。
再如：
grid-template-columns：2em 1fr 24% 1fr;
这里的1fr=（网格宽度-2em-网格宽度*24%）/2
总的来说，fr运用于grid布局中是一个非常方便的单位。
还会有补充，未完待续。
标签：布局 帮助 响应式 场景 外部 颜色 style bsp 方式
原文地址：https://www.cnblogs.com/ceneasy/p/9762751.html
