你可能不知道的7个CSS单位

 

如果你是一名前端开发工程师,一般px和em使用频率比较高。但是今天本文的重点是介绍一些我们使用很少、甚至么有听说的单位。

一、重温em

<style type="text/css">
body {font-size: 12px;}
div {font-size: 1.5em;}
< /style>
< body>
<div>
Test-01 (12px * 1.5 = 18px)
<div>
Test-02 (18px * 1.5 = 27px)
<div>
Test-03 (27px * 1.5 = 41px)
</div>
</div>
</div>
< /body>

因为font-size具有继承性,所以层数越深字体越大。

二、rem

虽然上面使用em的情况可能会在开发中用到,但是我们有时候想有一个基准来扩展。遇到这种需求时,我们可以使用rem单位,rem中的“r”代表“root”,这意味着设置当前元素的字体大小为根元素,大多数情况下,我们会设置在html元素上。

<style type="text/css">
html {font-size: 12px;}
div {font-size: 1.5rem;}
< /style>
< body>
<div>
Test-01 (12px * 1.5 = 18px)
<div>
Test-02 (12px * 1.5 = 18px)
<div>
Test-03 (12px * 1.5 = 18px)
</div>
</div>
</div>
< /body>

当然,rem单位不仅应用在字体上,还可以实现到CSS 网格系统中。

三、vh 和 vw

在进行响应式布局时,我们常常会使用百分比来布局,然而CSS的百分比不总是解决每个问题的最佳方案,CSS的宽度相对于离它最近的父元素的宽度。 如果你想使用视口的宽度、高度而不是父元素的宽高,可以使用vh和vw单位。 1vh = viewportHeight * 1/100; 1vw = viewportWidth * 1/100; 使用vh、vw就可以保证元素的宽高适应不同设备。

四、vmin 和 vmax

vw和vh对应于viewport的width和height,而vmin和vmax分别对应于width、height中的最小值和最大值,例如如果浏览器的宽/高被设置为1000px/600px,那么

1vmin = 600 * 1/100;

1vmax = 1000 * 1/100;

下面我们来看看几个实例:

4.1 一个正方形元件总是触摸至少两个屏的边缘

<style type="text/css">
.box {
height: 100vmin;
width : 100vmin;
}
< /style>
< body>
<div class="box" style="background-color: #f00">
fdasjfdlas
</div>
< /body>

4.2 覆盖全屏

<style type="text/css">
body {
margin: 0;
padding:0;
}
.box {
/*宽屏显示器width > height*/
height: 100vmin;
width : 100vmax;
}
< /style>

< div class="box" style="background-color: #f00">
fdasjfdlas
< /div>

五、ex 和 ch

ex、ch单位与em、rem相似之处在于都依赖于font-size,但是ex、ch还依赖于font-family,基于font-specific来计算。 引用w3C规范:

这两种单位,有许多用途,大部分是用于印刷时的微调整。例如,sup、sub元素分别显示上标和下标,但是我们可以使用position和bottom模拟:

<style type="text/css">
body {
margin: 0;
padding:0;
}

.sup {
position: relative;
bottom: 1ex;
}
.sub {
position: relative;
bottom: -1ex;
}
< /style>
< div>
AaB<span class="sup">b</span>CcXxD<span class="sub">d</span>EeFf
< /div>


 

 


 
 
 

本站永久域名

www.iulei.com

爱优磊个人网站由站长制作并维护

爱优磊保留本网页的设计版权,任何人在未经许可情况下不得套用。

Copyright ©2015 All rights reserved. 京ICP备14003788