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

麦田3年前 (2020-05-11)工作笔记415

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%

相关文章

HTML引入CSS的方法和示例

HTML和CSS是不同的两种语言,但是它们对网页同时产生作用。网页(WebPage)= 内容(html) + 表现(css) + 行为(javascript),因此需要把CSS引入HTML一起使用,让...

CSS3利用linth-child(n)实现隔几行设置元素

hugo主题ivy首页就是全部文章列表,如果文章过多,一眼看去会视觉疲劳。虽然可以设置分页,但是我忽然想:能不能设置每隔10个li就写个标记,比如不同的颜色或者分割线来减少视觉疲劳!通过谷歌搜索找到答...

CSS命名规则/CSS命令规范

按照规范命名CSS,更专业,更易于管理!头部:header内容:content/container尾部:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽...

DIVCSS的class和id的区别

网页中,常见的是div class,有时也有div id,这两者有什么区别呢?<div class="wrap">,对应的是.wrap<div id="...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。