美文网首页让前端飞
font-size的可用单位有哪些?

font-size的可用单位有哪些?

作者: rain_li | 来源:发表于2019-02-21 14:39 被阅读4次

font-size的长度单位汇总如下:

  • 像素单位(px)
  • em
  • rem
  • 百分比(%)
  • 视窗单位(vw,vh,vmin,vmax)
  • 绝对以及相对关键字设置字体大小(small,x-small等)
  • 其他(英寸-in,厘米-cm等)

就上面的长度单位,我们简单说一下:

1.像素单位(px)

绝对长度单位。像素px是相对于显示器屏幕分辨率而言的,不支持IE的缩放

2.em

相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸

  • em的值并不是固定的;
  • em会继承父级元素的字体大小。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px ;
那么12px=0.75em,10px=0.625em ;
so,为了简化font-size换算,在body选择器中设置 Font-size=62.5% ;
这样em的值只需要将你的原来的px数值除以10,然后换上em作为单位就可以
18px=1.8em, 10px=1em

3.rem

相对长度单位。使用rem为元素设定字体大小时,仍然是相对大小,但相对的是网页的根元素(html)元素
关于rem的文章:http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/

4.百分比(%)

16px = 1em = 100% = 12pt
单位换算网址:http://pxtoem.com/

5.vw

视口百分比长度定义相对于viewport的大小的<length>值,即文档的可见部分。
vw 代表视口宽度的 1/100。

参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

相关文章

  • font-size的可用单位有哪些?

    font-size的长度单位汇总如下: 像素单位(px) em rem 百分比(%) 视窗单位(vw,vh,vmi...

  • 动态REM

    常用单位 px:像素em:相对长度单位。表示元素的font-size的计算值。如果用在font-size属性本身,...

  • 动态REM

    rem 这个单位代表根元素的 font-size 大小(例如 元素的font-size)。 rem 与 em ...

  • 动态REM(手机专用)

    什么是 REM这个单位代表根元素的 font-size 大小(例如 元素的font-size)。当用在根元素的...

  • 一道关于系统高可用的面试题

    1.导致系统不可用的原因有哪些?保障系统稳定高可用的方案有哪些?请分别列举并简述。答:答:导致系统不可用的原因主要...

  • 字体样式属性调试

    font字体 1、font-size:大小 选择器 { font-size :20px; /单位一般用p...

  • 13-CSS文字文本样式

    1.font字体 1.1 font-size:大小 作用:font-size属性用于设置字号 单位:可以使用相对长...

  • 今日面试题汇总2019-03-29

    Q: CSS 有哪些样式可以给子元素继承! 可继承的:font-size,font-weight,line-hei...

  • 5. 移动端适配rem方案

    1. rem+动态html的font-size rem单位是相对于html元素的font-size来设置的,那么如...

  • CSS—与文本有关的属性设置

    字号font-size//相对单位font-size:14px; //px与当前使用的显示屏的分辨率有关,1...

网友评论

    本文标题:font-size的可用单位有哪些?

    本文链接:https://www.haomeiwen.com/subject/mciryqtx.html