相对单位等广泛用途
响应式设计:样式能够根据浏览器窗口等大小有不同的“响应”。
相对单位就是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;
}
自定义属性基于当前变量值,产生了两种不同颜色的面板。