em和rem
em
是最常见的相对长度单位,适合基于特定的字号进行排版。在CSS中,1em
等于当前元素的字号,其准确值取决于作用的元素。
.padded { font-size: 16px; padding: 1em; //浏览器将其乘以字号,最终渲染为16px }
浏览器会根据相对单位的值计算出绝对值,称作计算值。当设置padding
、height
、width
、border-radius
等属性时,使用em
会很方便。这是当元素继承了不相同的字号,这些属性会跟着元素均匀的缩放。
使用em定义字号
前面说到,当前元素的字号决定了em,如果声明font-size: 1.2em
,一个字号怎么等于自己的1.2倍?——实际上,font-size
是根据继承的字号来计算的。
// html <body> Body text <p class="text">paragraph text</p> </body> // css body { font-size: 16px; } .text { font-size: 1.2em; // 计算结果为元素继承的字号的1.2倍 }
使用rem设置字号
在文档中,根节点是所有其他元素的祖先节点。根节点有一个伪类选择类(:root)
,可以用来选中自己。
rem
是root em
的缩写,rem是相对于根元素的单位
vh、vw、vmin和vmax
em和rem都是相对于font-size
定义的,但CSS中不只有这一种相对单位,还有相对于浏览器视口定义长度的视口的相对单位。
视口:浏览器中窗口里网页可见部分的边框区域,不包括地址栏、工具栏和状态栏。
vh
:视口高度的1/100vw
:视口宽度的1/100vmin
:视口宽、高中较小一方的1/100(IE9中叫vm
,而不是vmin
)vmax
:视口宽、高中较大一方的1/100
比如,50vw
等于视口宽度的一半。
// 定义正方形 .square { width: 90vmin; height: 90vmin; }
使用vw定义字号——如果给一个元素加上font-size: 2vw
, 在一个1200px
的显示器上,计算值为24px(1200*2%)
。这么做的好处在于元素能够在两种大小之间平滑的过渡,不会在某个断点突然改变。当视口大小改变时,元素会逐渐过渡。
使用calc()
calc()
函数内可以对两个及其以上的值进行基本运算(加减乘除),加号和减号两边必须有空白。
:root { font-size: calc(0.5em + 1vw); }
0.5em
保证了最小字号,1vw
确保了字体随着视口缩放。
媒体查询 @media
我们可以根据屏幕尺寸,用媒体查询改变根元素的字号
:root { font-size: 0.75em; // 作用到所有屏幕上 } @media (min-width: 800px) { :root { font-size: 0.875em; // 仅作用于宽度800px及以上的屏幕,覆盖以前的值 } } @media (min-width: 1200px) { :root { font-size: 0.875em; // 仅作用于宽度1200px及以上的屏幕,覆盖前面两个的值 } }