为了账号安全,请及时绑定邮箱和手机立即绑定

CSS基础(二)——相对单位

标签:
Html/CSS

前言

大家最熟悉也最经常用的是像素(px),这是一个绝对单位,在不同场景下所呈现的大小是一样的。与之相对的,就是相对单位,例如em, rem,相对单位会因外部的因素改变而跟着改变。

很多前端开发者不太喜欢相对单位,尤其是em,因为em的值看起来不可预测而且没有px那么清晰。不过对于响应式开发相对单位是很重要的,所以接下来我将详细解释相对单位,方便我们以后可以更简单、容易、正确的使用它们。

1.  em和rem

em是最常用的一个相对单位,它的实际大小是根据font size来决定的。1em的值为当前元素的字体大小,它的值得具体变化依赖于它所应用的那个元素。举个例子,

webp

webp

small元素padding和border-radius的实际大小为12px;而Large元素的padding和border-radius的实际大小为18px。

这就是em有意义的地方,你可以定义一个元素的大小,并且根据font size来缩放整体。

1.1 用em来定义字体大小(font-size)

我们刚才说过,em的大小是根据font-size来决定的,那么font-size: 1.2em 代表的意思是什么呢?font size的em值取决于它继承的font-size。举例如下:

webp

webp

slogan的font size为1.2em,转化为px就需要从继承的font size 18px计算,1.2 rem = 18px*1.2=21.6px

1.2  用rem来定义字体大小(font-size)

rem是根据em演变过来的,可以写成root em,这样就比较容易了理解了。在DOM节点树中,<html>元素是顶级节点,也就是root node。<head><body>以及他们的孩子,孙子都是<html>的子节点。这些子节点,孙子节点中,rem的值都取决于根节点。根节点的值是固定的,此时在文档的任何地方rem的值将保持不变。

2.  视口单位

视口单位也是一个相对长度单位。那么视口指的是什么呢?浏览器窗口的可视区域就是视口,不包括浏览器的地址栏、工具栏和状态栏。做一个简单的说明:

vh— 视口高度的1%

vw—视口宽度的1%

vmin—视口宽度和高度中较小值的1%(IE9 中要写成vm)

vmax—视口宽度和高度中较大值的1% (目前在IE 和 Edge浏览器中不支持)

也就是说浏览器可视区域的高度为100vh,宽度为100vw。50vh就是视口高度的一半,25vw是视口宽度的1/4。

3. 没有单位的数字

一些属性允许没有单位的值存在,这些属性包括:line-height ,  z-index ,font-weight(700等价于bold,400等价于normal)。还可以在长度单位上使用无单位的0,因为0px等价于0%或0em。

  line-height属性有无单位都可以,不过我们应该都使用无单位的数字,这是因为他们的继承会产生差异。我们举一个例子,

webp

webp

这时候div继承来自body的行高1.5,字体大小为32px(2em x 16px,16px为浏览器的默认字体大小),行高的值就是48px(32px x 1.5),这个时候文字之间会有一个合适的间距。如果我们给line-height加上单位,可能会有意料之外的结果出现,如下:

webp

webp

这时候div继承来自body的行高1.5em,也就是 24px(1.5em x 16px ),字体大小为 32px,因此文本之间会相互重叠。

当使用无单位的数字时,声明的值是继承的,这意味着每个继承子元素的line height值都将被重新计算。

4.  自定义属性

自定义属性是2015年候选推荐发布的CSS新规范,该规范将变量的概念引入到CSS中。你可以声明一个变量并给它赋值,然后可以在整个样式表中引用这个值。目前的主流浏览器都支持自定义属性(除了IE),不过在一些浏览器中存在兼容性的问题,随着时间的发展,自定义属性一定会普及的。

webp

如果你碰巧使用过支持变量的CSS预处理器,比如Sass(语法上很棒的样式表)或者Less,你可能会倾向于忽略CSS变量。不过新的CSS变量在本质上是不同的,并且比预处理器所能完成的任何事情都要灵活得多。

我们举一个使用自定义属性的例子,

webp

webp

自定义属性前面一定要加(--),以此来区分CSS属性,后面跟上你想定义的名字。用var()函数使用刚才所定义的 --brand-color 变量。

我们也可以使用javascript来改变自定义属性,这是Sass或者Less无法做到的。

var rootElement = document.documentElement;

rootElement.style.setProperty('--brand-color', '#000');

运行这段js代码,--brand-color 的值将会被更新为黑色。

webp

在老的浏览器中,var()将会被忽视,因为无法识别。所以,应该使用一些兼容方案,例如:

color: black;

color: var(--brand-color);



作者:海阔天空的远方
链接:https://www.jianshu.com/p/cc39ff08a886


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消