CSS常见的尺寸单位

px(像素 )

最常用的也是最基本的单位就是px,表示占多少像素值。页面默认是16像素。

{
    font-size: 16px;
}

em

em也是经常用到的单位,一般用在字体上。它的大小由父元素决定。如果父元素的字体大小是20px,那么子元素中1em = 20px

{
    font-size: 2em;.
}

rem

rem是做移动端适配必不可少的。它是根据html根元素的大小决定的。

html{
    font-size: 62.5%;
}

因为页面大小是16px,如果我们需要12px时就得算一下,得到0.625rem。这样比较麻烦,把根元素设置成10px,算起来方便多了。

p{
    height: 1.2rem; //12px
}

vh / vw

vhvw是css3的新单位,用来做适配也是非常的方便。1vw就等于/页面宽度的1%。高度也是如此。

p{
    height: 10vh; //页面高度的10分之一
}

vmin / vmax

1vmin是获取页面宽度和高度中较小的一个值的1%,1vmax则是获取较大的一个值的1%。我暂时还未用到。

ch / ex

ch表示当前字体下,0字符的高度。ex表示当前字体下x字符的高度。所以这两个单位的大小由字体大小和字体类型决定。暂时也还没用到。

你可能感兴趣的:(CSS常见的尺寸单位)