css3中的一些特别的单位:em、rem、vw、vh、vmin、vmax
2016-05-20 00:00
239 查看
摘要: css3中一些特别单位的介绍。
em:相对父元素的单位。例:父节点font-size:20px;子节点font-size:1em;(即子节点为20px)。
rem :相对于根节点(html的字体大小)的单位。在不设定html字体大小时,会获取流浪器的默认字体大小。例:font-size:1rem;即元素的字体大小为1倍的流浪器默认字体大小。另外需注意chrome强制最小字体为12px,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。
vw:相对于视窗宽度(viewpoint width)。如:height:100vw;且此时的视窗宽为200px,则height:(100*200)/100。
vh:相对于视窗宽高度(viewpoint height)。与vm同理。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
vw, vh, vmin, vmax流浪器支持情况说明:IE9+局部支持,chrome/firefox/safari/opera支
持,iOS safari 8+支持,Androidbrowser4.4+支持,chrome for android39支持
css中的一些其他单位:
in:英寸
cm:厘米
mm:毫米
ex:一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半,在无法确定x-height
的情况下以0.5em计算)
pt:磅 (1 pt 等于 1/72 英寸)
pc:12 点活字 (1 pc 等于 12 点)
ch:以节点所使用字体中的“0”字符为基准。找不到时为
0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)
px:像素 (计算机屏幕上的一个点)
em:相对父元素的单位。例:父节点font-size:20px;子节点font-size:1em;(即子节点为20px)。
rem :相对于根节点(html的字体大小)的单位。在不设定html字体大小时,会获取流浪器的默认字体大小。例:font-size:1rem;即元素的字体大小为1倍的流浪器默认字体大小。另外需注意chrome强制最小字体为12px,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。
vw:相对于视窗宽度(viewpoint width)。如:height:100vw;且此时的视窗宽为200px,则height:(100*200)/100。
vh:相对于视窗宽高度(viewpoint height)。与vm同理。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
vw, vh, vmin, vmax流浪器支持情况说明:IE9+局部支持,chrome/firefox/safari/opera支
持,iOS safari 8+支持,Androidbrowser4.4+支持,chrome for android39支持
css中的一些其他单位:
in:英寸
cm:厘米
mm:毫米
ex:一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半,在无法确定x-height
的情况下以0.5em计算)
pt:磅 (1 pt 等于 1/72 英寸)
pc:12 点活字 (1 pc 等于 12 点)
ch:以节点所使用字体中的“0”字符为基准。找不到时为
0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)
px:像素 (计算机屏幕上的一个点)
相关文章推荐
- 自定义NSSearchFiled样式
- CSS解释器和样式布局
- CSS基本样式
- css中的baseline
- css3加js做一个简单的3D行星运转效果
- CSS选择器
- (5)css盒子模型(基础上)
- css3动画之animate
- css可继承属性和不可继承属性
- CSS颜色属性,边框属性
- CSS属性选择器温故-4
- CSS布局奇淫技巧之-宽度自适应
- CSS3伪类选择器nth-child和nth-of-type浅析
- CSS3D效果
- CSS中position的absolute如何相对于父元素的位置进行定位
- CSS position属性和实例应用
- CSS凹型导航按钮
- css与js后边有?v=20160101
- CSS动态伪类选择器温故-3
- css hack