麦田的博客

css字体大小单位介绍和转换对照表

2019-09-18


css字体大小单位,常见的有px、em、rem,这三个的区别是:

px是固定的像素,设置后无法为适应页面大小而改变,但实际上这是我经常使用的字体单位大小,设置后页面显示正常,不存在在手机中字体过小的问题;

em和rem相对于px更具有灵活性,他们是相对大小单位,更适用于响应式布局。

em和rem的区别:em相对于父元素,rem相对于根元素。rem中的r就是root的缩写。

初次以外,少数人设置css字体大小还会使用pt。

除了字体大小的单位,在css中单位长度也会用到px、em、rem,使用上是一样的。

附px、em、rem单位的转换对照表:

以font-size: 16px为根基,查看px和rem互相转换的对照表

10px 0.625rem

11px 0.6875rem

12px 0.75rem

13px 0.8125rem

14px 0.875rem

15px 0.9375rem

16px 1rem

17px 1.0625rem

18px 1.125rem

19px 1.1875rem

20px 1.25rem

21px 1.3125rem

22px 1.375rem

23px 1.4375rem

24px 1.5rem

25px 1.5625rem

26px 1.625rem

27px 1.6875rem

28px 1.75rem

29px 1.8125rem

30px 1.875rem

31px 1.9375rem

32px 2rem

33px 2.0625rem

34px 2.125rem

35px 2.1875rem

36px 2.25rem

37px 2.3125rem

38px 2.375rem

39px 2.4375rem

40px 2.5rem

41px 2.5625rem

42px 2.625rem

43px 2.6875rem

44px 2.75rem

45px 2.8125rem

46px 2.875rem

47px 2.9375rem

48px 3rem

49px 3.0625rem

50px 3.125rem

51px 3.1875rem

52px 3.25rem

53px 3.3125rem

54px 3.375rem

55px 3.4375rem

56px 3.5rem

57px 3.5625rem

58px 3.625rem

59px 3.6875rem

60px 3.75rem

61px 3.8125rem

62px 3.875rem

63px 3.9375rem

64px 4rem

字体大小单位pt、px、em转换对照表

6pt 8px 0.5em 50%

7pt 9px 0.55em 55%

7.5pt 10px 0.625em 62.5%

8pt 11px 0.7em 70%

9pt 12px 0.75em 75%

10pt 13px 0.8em 80%

10.5pt 14px 0.875em 87.5%

11pt 15px 0.95em 95%

12pt 16px 1em 100%

13pt 17px 1.05em 105%

13.5pt 18px 1.125em 112.5%

14pt 19px 1.2em 120%

14.5pt 20px 1.25em 125%

15pt 21px 1.3em 130%

16pt 22px 1.4em 140%

17pt 23px 1.45em 145%

18pt 24px 1.5em 150%

20pt 26px 1.6em 160%

22pt 29px 1.8em 180%

24pt 32px 2em 200%

26pt 35px 2.2em 220%

27pt 36px 2.25em 225%

28pt 37px 2.3em 230%

29pt 38px 2.35em 235%

30pt 40px 2.45em 245%

32pt 42px 2.55em 255%

34pt 45px 2.75em 275%

36pt 48px 3em 300%


相关内容

  • Hugo升级方法和遇到的问题
  • DIVCSS的class和id的区别
  • HTML引入CSS的方法和示例
  • vscode的使用经验-编辑md文件
  • 麦田收集的优秀网站
  • RAKsmart主机教程
  • OpenCart商城程序使用经验
  • Win10系统安装Jekyll详细教程
  • WordPress不加载自定义js和css文件
  • Markdown写静态网站指南
  • 标签

    字体教程csshtml