前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端:CSS字体大小 px、em、rem的区别

前端:CSS字体大小 px、em、rem的区别

作者头像
渔父歌
发布2020-03-26 21:22:22
2.1K0
发布2020-03-26 21:22:22
举报
文章被收录于专栏:数据结构笔记数据结构笔记

1、px

1px的长度表示显示器中一个像素(pixel)的长度,实际显示的效果和显示器的 DPI(Dot Per Inch,每英寸像素数)有关,DPI越大每英寸的像素数越多,每个像素的实际大小越小。通常来说分辨率越高的屏幕 DPI也就越高,所以高分辨率屏幕显示的图标和字体都要更小一些。

所有浏览器的默认字体大小都是 16px。

px的特点

  1. IE无法调整那些使用px作为单位的字体大小;
  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

2、em

em(font size of the element)是指相对于父元素的字体大小的单位。

所以默认情况下 1em=16px

EM特点

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

3、rem

rem和 em相似,但是 rem是相对于根元素的字体大小单位。

与 em相比 rem更方便计算也更加直观。

但是 rem在 IE8及其以下都不兼容。

其长度单位: vw : 1vw 等于视口宽度的1% vh : 1vh 等于视口高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个

参考: 字体大小之px、em、rem、pt,字号详解:https://www.cnblogs.com/zhaowy/p/8400271.html vw vh视口百分比:https://blog.csdn.net/weixin_44766281/article/details/103044194

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、px
  • 2、em
  • 3、rem
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档