首页 > Web开发 > 详细

网页元素--字体相对单位

时间:2016-09-13 20:36:12      阅读:146      评论:0      收藏:0      [点我收藏+]
rem 相对html的font-size单位,在使用rem前要先设置根元素的单位:

/*根元素*/
html { font-size: 16px }

/*使用时*/
p { font-size: 2rem }  //32px

em 相对当前对象文本单位尺寸,如果当前对象没有设置默认文本尺寸,则相对于浏览器默认字体尺寸

/*当前对象尺寸*/
body { font-size: 16px }

/*使用时*/
p { font-size: 2em }   //32px

vw / vh  && vmax / vmin 相对于当前窗口的宽度 / 高度 && 最大值 / 最小值,查询当前窗口的宽度的命令为:screen.width / height

如果当前窗口的宽度为2400,那么使用vw后元素的尺寸为:2400 * 5vw / 100 = 120
/*当前窗口尺寸*/
在浏览器的console中查询:screen.width

/*使用时*/
p { font-size : 5vw; }    //120px

ex 相对于字符 “ x ”的高度,通常字体为高度的一半。如果当前行内文字的大小没有设置,就相对于默认浏览器的字体的高度

/*当前字体的大小*/
h1 { font-size: 16px; }

/*使用时*/
.x { height: 1ex; }    //8px

 

网页元素--字体相对单位

原文:http://www.cnblogs.com/baiyygynui/p/5869549.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!