【深入理解CSS】相对单位

相对单位等广泛用途

响应式设计:样式能够根据浏览器窗口等大小有不同的“响应”。
相对单位就是CSS来解决这种问题的一种工具,我们可以基于窗口大小来等比例地缩放字号,而不是固定的像素。或者将网页上任何大小都相对于基础字号来设置,只用一行代码就能缩放整个网页。

em和rem

💡em
若当前元素的字号为16px,那么1em就是16px,2em为32px,即浏览器会根据相对单位计算出绝对值。
当设置padding、height、width、border-radius等属性时,em会很方便。
在这里插入图片描述
如上图,定义一个元素的大小,然后只需要改变字号就能整体缩放元素。
💡rem
在文档中,根结点啥其他元素的祖宗节点。根结点有一个伪类选择器(:root),用来选中它自己。
rem是root em的缩写,是相对于根元素的单位。不管在文档内的什么位置使用rem,都会有相同的计算值。
在这里插入图片描述
一般来讲,用rem设置字号,px设置边框,em设置其他大部分属性(内外边距、圆角等)

构造响应式面板

利用媒体查询改变根元素的字号。这样就能基于不同用户的屏幕尺寸,渲染出不同大小的面板。
在这里插入图片描述

视口的相对单位

除了em和rem,CSS内还有一种相对单位,即相对于浏览器视口定义长度的相对单位。
 vh:视口高度的 1/100。
 vw:视口宽度的 1/100。
 vmin:视口宽、高中较小的一方的 1/100。
 vmax:视口宽、高中较大的一方的 1/100。
💡使用calc()定义字号
calc函数内可以对两个及以上的值进行基本运算。

:root {
 font-size: calc(0.5em + 1vw);
}

使用如上设置,可以使字体平滑地缩放,而且0.5em又保证了最小字号。

无单位的数值和行高

💡line-height
💡z-index(盒子在当前堆叠上下文中的堆叠层级)
💡font-weight(100-900之间,400等于normal,700等于bold)

自定义属性

在CSS中内可以声明一个变量,为它赋值,然后在样式表的其他地方引用这个值,可以减少重复和修改。

:root {
 --main-font: Helvetica, Arial, sans-serif;
 --brand-color: #369;
} 
p {
 font-family: var(--main-font);
 color: var(--brand-color);
}

同时,你也可以在后面加上另一个参数以提供备用值。

:root {
 --main-font: Helvetica, Arial, sans-serif;
 --brand-color: #369;
} 
p {
 font-family: var(--main-font, sans-serif);
 color: var(--secondary-color, blue);
}

动态改变自定义属性

:root {
 --main-bg: #fff;
 --main-color: #000;
} 
.panel {
 font-size: 1rem;
 padding: 1em;
 border: 1px solid #999;
 border-radius: 0.5em;
 background-color: var(--main-bg);
 color: var(--main-color);
} 
.panel > h2 {
 margin-top: 0;
 font-size: 0.8em;
 font-weight: bold;
 text-transform: uppercase;
}
.dark {
 margin-top: 2em;
 padding: 1em;
 background-color: #999;
 --main-bg: #333;
 --main-color: #fff;
}

在这里插入图片描述
自定义属性基于当前变量值,产生了两种不同颜色的面板。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cheerio_inf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值