您现在的位置:首页 >> 前端 >> 内容

CSS单位介绍:px,em,rem,vh和vw等

时间:2018/4/14 10:19:41 点击:

  核心提示:1. px# px(像素)是一个虚拟长度单位,是计算机系统的数字化图像长度单位# 特点:#1. px是一种绝对单位(absolute units)。其他的绝对单位有:mm(毫米),cm(厘米),in(...

1. px

# px(像素)是一个虚拟长度单位,是计算机系统的数字化图像长度单位

# 特点:

#1. px是一种绝对单位(absolute units)。其他的绝对单位有:mm(毫米),cm(厘米),in(英寸),pt(点),pc(十二点活字)

#2. IE无法调整使用px作为单位的字体大小(缩放)

#3. 国外大部分网站能够调整的原因在于使用了相对单位em和rem

#4. Firefox可以调整px,em和rem,但大部分中国网民使用的还是IE内核或浏览器

2. em

# em指字体高,浏览器的默认字体高是16px。所以未经调整的浏览器符合:1em=16px

# 特点:

#1. em是一种相对单位,它相对于父元素的字体大小

#2. 需要注意标签嵌套情况下的字体大小问题,所以不适用于布局。(如父标签font-size:1.2em; 字标签font-size:1.2em;那么最终字体为1.2*1.2=1.44)

#3. 当设置为1em时,表示当前元素的字体大小与父元素相同。

3. rem

# rem(全称root em)是CSS3新增的一个相对单位

#1. rem是一种相对单位,它相对于根元素(html标签)的字体大小

#2. rem可以避免em因为标签嵌套产生的字体大小问题

#3. IE8及以下浏览器不支持rem

#4. 当使用rem来设置字体大小时,就必须要设置html标签的字体大小,否则按照默认1rem=16px;

#5. rem本质是等比缩放,一般是基于宽度,通常用于移动端页面的布局

4. vh和vw

# vh/vw单位类似于百分比单位,也是一种相对单位

# 特点:

#1. 百分比单位的布局依赖于父级的宽高,而vh/vw则是相对于视口的宽高

#2. 适用于移动端,支持度基本全支持

5. vmin和vmax

# vmin是指vh和vw中较小的那一个的大小,vmax是指vh和vw中较大的那一个的大小

# 特点:

#1. 使用vmin/vmax单位时,我们并不关心宽高,而是按照大小来区分

#2. 在移动端用的较多

6. ex和ch

# 使用的频率不高。ex被定义为当前字体下的字符0(数字)的高度,ch被定义为当前字体下的字符x(小写)的宽度

# 特点:

#1. ch适用于等宽字体,可以设置一个盒子能够容纳多少个字符

#2. ex通常用于排版微调

#3. 由于中文和英文的字体宽度不一样,所以ch并不适用于布局

#4. ex的应用场景基本都可以用em来实现

Tags:CS SS S单 单位 
作者:网络 来源:u012194956