码迷,mamicode.com
首页 > Web开发 > 详细

CSS单位分析及CSS颜色表示法、颜色表(调色板)

时间:2018-10-09 21:46:20      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:布局   帮助   响应式   场景   外部   颜色   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布局中是一个非常方便的单位。

还会有补充,未完待续。

 

CSS单位分析及CSS颜色表示法、颜色表(调色板)

标签:布局   帮助   响应式   场景   外部   颜色   style   bsp   方式   

原文地址:https://www.cnblogs.com/ceneasy/p/9762751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!