rem 前端字体_web前端入门到实战:一次搞懂CSS字体单位:px、em、rem和%

89aeb829b95b58f510654e38c31e809c.png

对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。

“网页”和“印刷”的单位
若要把单位做区隔,最简单可以分为“网页”和“印刷”两大类,通常对于CSS来说只会应用到网页的样式,毕竟真正要做印刷,还是会倾向透过排版软件来进行设计。

网页(单位)

  • px:绝对单位,代表屏幕中每个「点」(pixel)。
  • em:相对单位,每个子元素透过「倍数」乘以父元素的px值。
  • rem:相对单位,每个元素透过「倍数」乘以根元素的px值。
  • %:相对单位,每个子元素透过「百分比」乘以父元素的px值。

网页(属性名称)

  • medium:预设值,等于16px(h4预设值)
  • xx-small:medium的0.6倍(h6预设值)
  • x-small:medium的0.75倍
  • small:medium的0.8倍(h5预设值,W3C定义为0.89,实测约为0.8)
  • large:medium的1.1倍(h3预设值,W3C定义为1.2,实测约为1.1)
  • x-large:medium的1.5倍(h2预设值)
  • xx-large:medium的2倍(h1预设值)
  • smaller:约为父层的80%
  • larger:约为父层的120%

印刷

  • pt:打印机的每个「点」,定义为1 pt=1/72 in,如果在72 dpi的系统上1 px = 1 pt,但如果在96dpi的系统上1 px = 0.75 pt(72/96 = 0.75)。
  • in:英寸,在96 dpi的系统上1 in = 96 px。
  • cm:厘米,在96 dpi的系统上1 cm = 37.795275593333 px。
  • mm:毫米,在96 dpi的系统上1 cm = 3.7795275593333 px。

示例展示
以下将展示四种不同单位的示例,为公平起见,四个示例都套用预设的div格式,纯粹改变font-size看看有何不同,由于子元素若没有设定font-size,会自动继承父元素的font-size,使用上就应该要预先初始化字体大小,下面这两段CSS可以将所有的元素字体大小预设为16px,然后可个别进行调整。

html{font-size:16px;
}html * {font-size: 1rem;
}

1. px
px是绝对单位,因此只要设定多少px,就会精确的呈现,对于一些讲求精准位置的排版而言十分有用,如示例表示的,指定多大px字体就会多大。

<div style="font-size:16px;">16px<div style="font-size:20px;">20px<div style="font-size:24px;">24px<div style="font-size:16px;">16px<div style="font-size:32px;">32px</div></div></div></div>
</div>

9f67a2cf6492ac84e40d4edc5c2213f2.png

2. em
em是相对单位,为每个子元素透过“倍数”乘以父元素的px值,如果我们每一层div都使用1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。(浏览器预设字体大小为16px,若无特别指定则会直接继承父元素字体大小)

<div style="font-size:1.2em;">1.2em<div style="font-size:1.2em;">1.2em<div style="font-size:1.2em;">1.2em<div style="font-size:1.2em;">1.2em<div style="font-size:1.2em;">1.2em</div></div></div></div>
</div>

5c4733018825ff53cb9a98d7c295aea9.png

3. rem
rem是相对单位,为每个元素透过“倍数”乘以根元素的px值,如果我们每一层div都使用1.2rem,最内层就会是16px x 1.2 = 19.2px。(根元素指的是html的font-size,预设为16px)

<div style="font-size:1.2rem;">1.2rem<div style="font-size:1.2rem;">1.2rem<div style="font-size:1.2rem;">1.2rem<div style="font-size:1.2rem;">1.2rem<div style="font-size:1.2rem;">1.2rem</div></div></div></div>
</div>

a71a8e312491d099004917fd2a08b500.png

4. %
%百分比是相对单位,和em大同小异,简单来说em就是百分比除以一百,如果我们每一层div都使用120%,就等同于1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。

<div style="font-size:120%;">120%<div style="font-size:120%;">120%<div style="font-size:120%;">120%<div style="font-size:120%;">120%<div style="font-size:120%;">120%</div></div></div></div>
</div>

bc267947eace92abd463b24abdaa9217.png

5.small、medium、large…等
字体大小的属性有七种,分别是xx-small、x-small、small、medium、large、x-large和xx-large,除了x-small,其余六种分别对应h6~h1的标签文字大小,根据W3C的规范,以medium预设16px为基础(若html字体预设大小改变,medium也会跟着变),使用固定的百分比乘以medium的大小,例如ss-small预设为16px x 0.6 = 9.6px(浏览器显示为12px)。

aa94683bee6fa3d1ab69778b861f68d4.png
<div style="font-size:xx-small;">xx-small<div style="font-size:x-small;">x-small<div style="font-size:small;">small<div style="font-size:medium;">medium<div style="font-size:large;">large<div style="font-size:x-large;">x-large<div style="font-size:xx-large;">xx-large</div></div></div></div></div></div>
</div>

70e18e940dbdc2e2855f44e71b1768d5.png

6. larger、smaller
larger和smaller就是固定百分比为单位,larger为父层的120%,smaller为父层的80%。

<div style="font-size:medium;">medium<div style="font-size:larger;">larger<div style="font-size:larger;">larger<div style="font-size:larger;">larger<div style="font-size:smaller;">smaller<div style="font-size:smaller;">smaller<div style="font-size:smaller;">smaller</div></div></div></div></div></div>
</div>

04ef49728d71b7c50140b65c6fb45ae1.png

小结
熟悉了字体大小单位之后,就更能有系统的设计整个网站的CSS构架,不过font-size本身和font-family有着一些复杂的关系,不同的font-family有时也会影响font-size的设定,因此使用上还是得稍微注意一下啰!

更多大型互联网web前端实战操作,在线解析,学习指导,学习资源,点:【WEB前端资源】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/338439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jvmti_JVMTI标记如何影响GC暂停

jvmti这篇文章分析了为什么Plumbr Agents在某些情况下以及如何延长GC暂停的时间。 对基本问题进行故障诊断揭示了有关在GC暂停期间如何处理JVMTI标记的有趣见解。 发现问题 我们的一位客户抱怨说&#xff0c;附加了Plumbr代理后&#xff0c;应用程序的响应速度明显降低。 通过…

C语言-使用goto语句从循环中跳出

实例代码// //实现功能&#xff1a;使用goto语句从循环中跳出 //#include "stdio.h"#define EXIT 0void show_Menu(){printf("菜单选项:\t");printf("1&#xff1a;显示\t");printf("2&#xff1a;添加\t");printf("3&#xff1a…

粒子群算法组卷_粒子群(PSO)算法概念及代码实现

粒子群算法的由来及思想粒子群算法最早是由两名美国的科学家基于群鸟觅食&#xff0c;寻找最佳觅食区域的过程所提出来的&#xff0c;作为一种智能算法&#xff0c;PSO模拟的就是最佳决策的过程&#xff0c;鸟群觅食类似于人类的决策过程&#xff0c;想想在你做出选择之前&…

装饰器模式java_Java 8的装饰器模式

装饰器模式java在最近的一篇文章中&#xff0c;我描述了装饰器模式如何挽救了我的一天。 我给出了一个小代码段&#xff0c;其中包含创建装饰器的最简单方法&#xff0c;但承诺Java 8会有更好的方法。 这里是&#xff1a; 用Java 8装饰 HyperlinkListener listener this::ch…

C语言-反转字符串

实例代码// //实现功能&#xff1a;输入一个字符串&#xff0c;然后将该字符串反向输出 //#include "stdio.h" #include "string.h"#define N 50void convert_str(char str[N]);void convert_str(char str[N]){int j;char temp;for (int i 0; i < strl…

信捷步进指令的使用_步进电机驱动器的模式

步进电动机和步进电动机驱动器构成步进电机驱动系统。步进电动机驱动系统的性能&#xff0c;不但取决于步进电动机自身的性能&#xff0c;也取决于步进电动机驱动器的优劣。对步进电动机驱动器的研究几乎是与步进电动机的研究同步进行的。步进电机驱动器有三种基本的步进电机驱…

jersey客户端_每个客户使用Jersey处理的Cookie

jersey客户端许多REST服务会将cookie用作身份验证/授权方案的一部分。 这是一个问题&#xff0c;因为默认情况下&#xff0c;旧的Jersey客户端将使用单例CookieHandler.getDefault &#xff0c;大多数情况下该值为null&#xff0c;如果不为null&#xff0c;则在多线程服务器环境…

C语言灵魂篇|指针作为函数返回值

C语言允许函数的返回值是一个指针&#xff08;地址&#xff09;&#xff0c;我们将这样的函数称为指针函数。下面的例子定义了一个函数 strlong()&#xff0c;用来返回两个字符串中较长的一个&#xff1a;#include #includechar *strlong(char *str1, char *str2){ if(strlen(s…

css 样式尾部带感叹号是什么意思_CSS书写规范

推荐大家看看百度FEX前端团队和腾讯AlloyTeam前端团队的CSS代码规范。fex-team/styleguide​github.comCode Guide by AlloyTeam​alloyteam.github.io1. 样式属性顺序单个样式规则下的属性在书写时&#xff0c;应按功能进行分组&#xff0c;组之间需要有一个空行。同时要以Pos…

c++返回指针时候注意提防_Java 8陷阱–提防Files.lines()

c返回指针时候注意提防Java8中有一个非常不错的新功能&#xff0c;它使您可以在一个内衬中从文件中获取字符串流。 List lines Files.lines(path).collect(Collectors.toList());您可以像处理任何其他Stream一样操作Stream&#xff0c;例如&#xff0c;您可能需要filter&…

C语言精髓篇|函数的参数和返回值

如果把函数比喻成一台机器&#xff0c;那么参数就是原材料&#xff0c;返回值就是最终产品&#xff1b;从一定程度上讲&#xff0c;函数的作用就是根据不同的参数产生不同的返回值。函数的参数在函数定义中出现的参数可以看做是一个占位符&#xff0c;它没有数据&#xff0c;只…

oc引导win方法_[OC更新]机械革命X1/X6TIS标压测试版更新

加关注这种话银家怎么好意思说出口嘛更新机型机械革命X1 i5-7300hq机械革命X1 i7-7700hq机械革命X6tis i5-7300hq机械革命X6tis i7-7700hq更新内容基于OC0.6.2 MOD版本编译修复WIN下电脑被识别为MBP导致电竞中心打不开问题修复INTEL网卡在BIG SUR下不识别问题禁用secureboot mo…

java 打开gc日志_在运行时打开GC日志记录

java 打开gc日志总是有下一个JVM表现不佳。 而且&#xff0c;您内心深知&#xff0c;如果您只有少数启动选项可以公开一些有关正在发生的事情的信息&#xff0c;那么您可能就有机会真正修复该死的东西。 但是不&#xff0c;您需要的标志&#xff08; -XX&#xff1a; HeapDumpO…

C 和C语言条件运算符的区别

条件运算符&#xff08;conditional operator&#xff09;有时候也称为三元运算符&#xff08;ternary operator&#xff0c;或者trinary operator&#xff09;&#xff0c;因为它是唯一需要 3 个操作数的运算符&#xff1a;条件 ? 表达式1 : 表达式2条件运算操作会首先计算条…

oracle 执行带参数的sql语句_当用EXECUTE IMMEDIATE执行SQL语句中的参数个数也是动态的?用什么方法实现?...

当用EXECUTE IMMEDIATE执行SQL语句中的参数个数也是动态的&#xff1f;用什么方法实现&#xff1f;描述详细一点就是&#xff1a;在要执行的SQL语句中所用到(: parameter)这种参数的个数&#xff0c;因具体条件不同&#xff0c;而不同&#xff0c;而在执行语句EXECUTE IMMEDIAT…

xsl调用java方法传参_Java中的XSL转换:一种简单的方法

xsl调用java方法传参XSL转换 &#xff08;XSLT&#xff09;是将一个XML文档转换为另一个XML文档的强大机制。 但是&#xff0c;在Java中&#xff0c;XML操作相当冗长和复杂。 即使是简单的XSL转换&#xff0c;也必须编写几十行代码—如果需要适当的异常处理和日志记录&#xff…

C 运算符和语句总结

运算符&#xff1a; C 表达式中的左值和右值&#xff1a;当一个对象被用作左值时&#xff0c;用的是对象的身份&#xff08;内存中的位置&#xff09;。当作为右值时&#xff0c;用的是对象的值&#xff08;内容&#xff09;。或者说&#xff0c;lvalue:具有存贮性质的对象&…

# 遍历结构体_C#学习笔记05--枚举/结构体

一.枚举当变量的取值范围是固定的几个, 例如性别--男,女; 英雄类型 -- 法师, 刺客.战士, 射手等等. 这时就可以使用枚举类型, 会更加简洁方便.1.1.定义:访问修饰符 enum 枚举类型名 {成员1,成员2,成员3,... }public enum Days{Mon 1,Tue,Wed,Thu,Fri,Sat,Sun}enum: 是枚举的…

单例嵌套 ios_嵌套类型的前5个用例

单例嵌套 ios前几天&#xff0c;关于reddit进行了有趣的讨论&#xff0c;即静态内部类。 什么时候太多&#xff1f; 首先&#xff0c;让我们回顾一下Java的基本历史知识。 Java语言提供了四个级别的嵌套类 &#xff0c;通过“ Java语言”&#xff0c;我的意思是这些构造仅是“…

C语言中枚举enum的用法

本文举例说明C语言中enum枚举关键字的用法。用来同时定义多个常量利用enum定义月份的例子如下。#include enum week {Mon1,Tue,Wed,Thu,Fri,Sat,Sun}; int main() {printf("%d",Tue); return 0; }这样定义Mon的值为1之后&#xff0c;Tue的值就被默认定义为2&#…