这期简单说说css字体单位

字体单位有三种：px、em、rem

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

% 百分比
in 英寸
cm 厘米
mm 毫米
em

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如，如果某元素以 12pt 显示，那么 2em 是24pt。

在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)

用的比较广泛的是：px ,em ,和rem

px是固定像素，em是相对父元素字体大小的百分比,如果div字体大小是20px，那么div的子节点1em就是20px,2em就是40px。

rem和em差不多，但是rem是相对于html(文档根元素document.documentElement)而不是父元素。

下面用一个非常简短的例子来展现一下

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			#div1{

				width:200px;

				height:200px;

				font-size: 20px;

				border: 2px solid black;

			}

			.p1{

				font-size: 2em;

			}

			.p2{

				font-size:2rem;

			}

			.p3{

				font-size:12px;

			}

		</style>

	</head>

	<body>

		<div id="div1">

			<p class="p1">这是em</p>

			<p class="p2">这是rem</p>

			<p class="p3">这是px</p>

		</div>

	</body>

</html>

效果就是下面

这是em

这是rem

这是px

本期就到这里了，

2.css字体单位的更多相关文章

  1. css 字体单位之间的区分以及字体响应式实现

    问题场景: 在实现响应式布局的过程中,如何设置字体大小在不同的视窗尺寸以及不同的移动设备的可读性? 需要了解的有: 1.px,em,pt之间的换算关系 1em = 16px 1px  = 1/16 e ...

  2. CSS对字体单位的总结

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  3. CSS 天坑 I - 字体单位

    首先,本文所讨论的“坑”是在做回应式网页设计( Responsive Web Design 以下简称 RWD)时显现的,如果你还只是在做传统的Web设计这算不上是一个坑,因为传统的Web页面是死的,不 ...

  4. css的字体单位

    在css中的字体单位主要以px.em.rem为主.其中px也就是像素,是一种字体长度,它的长度是相对于显示器的品目分辨率而言的.一般情况下在浏览器中默认字体的大小是16px.其中em是相对字体.em的 ...

  5. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  6. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  7. 搞清css的单位 px,em,rem的区别

    前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...

  8. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  9. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

随机推荐

  1. vmwvare 网卡设置讲解

  2. Shell 基础

    1.结构        #!指定执行脚本的shell  #!/bin/sh        # 注释行        命令和控制结构    2.修改权限        chmod +x ...    3 ...

  3. Angular Cookies 操作

    $cookiesProvider 使用$cookiesProvider改变$cookies服务的默认行为. 默认属性 path:字符串,cookies只在这个路径及其子路径可用.默认情况下,这个将会是 ...

  4. js面向对象oop编程

    理解对象 对象这个词如雷贯耳,同样出名的一句话:XXX语言中一切皆为对象! 对象究竟是什么?什么叫面向对象编程? 对象(object),台湾译作物件,是面向对象(Object Oriented)中的术 ...

  5. Java线程：堵塞队列与堵塞栈

    一.堵塞队列 Java定义了堵塞队列的接口java.util.concurrent.BlockingQueue,堵塞队列是一个指定长度的队列,当试图向队列中添加元素而队列已满,或者是想从队列移出元素而 ...

  6. 分析器错误消息: 无法识别的属性“targetFramework”。

    配置错误 说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消息: 无法识别的属性“targetFramework”.请注意属性名称区分 ...

  7. SecureCRT 保存FTP用户登录密码

    Connect连接对话框->右键选择Session->选择属性->选择Connection 中的 Logon Actions->在右侧进行设置:

  8. HDU1173

    采矿 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  9. C++ 头文件系列(unordered_map、unordered_set)

    简介 很明显,这两个头文件分别是map.set头文件对应的unordered版本. 所以它们有一个重要的性质就是: 乱序 如何乱序 这个unorder暗示着,这两个头文件中类的底层实现----Hash ...

  10. DTLS-PSK算法抓包解析

    一.DTLS -PSK PSK 是DTLS 定义的密钥交换方案之一,相对于公钥证书方案(如 ECDHA_RSA) 来说,其具备更加轻量化.高效的优点: 而目前 PSK方案应用也比较广泛. 关于DTLS ...