这期简单说说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. #DP# ----- OpenJudge数字组合

    OpenJudge 2985:数字组合 总时间限制:1000ms  内存限制: 65536kB 描述 有n个正整数,找出其中和为t(t也是正整数)的可能的组合方式.如:n=5,5个数分别为1,2,3, ...

  2. JSTL标签之c:foreach,c:if标签小结

    <c:forEach>标签用于通用数据循环,它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的 ...

  3. python实现二分查找与冒泡排序

    二分查找,代码如下: def binarySearch(l, t): low, high = 0, len(l) - 1 while low < high: 'print low, high' ...

  4. Linux下tomcat的安装与项目部署

    最近在linux下安装了jdk,为了圆我以前的心愿,把tomcat也安装了,顺便部署个项目,也算是小又成就感 废话不说了,直接上过程 一.下载安装对应的jdk,并配置Java环境. 有关jdk的安装请 ...

  5. 关于Node.js后端架构的一点后知后觉

    前言 上周有幸和淘宝前端团队的七念老师做了一些NodeJS方面上的交流(实际情况其实是他电话面试了我╮(╯-╰)╭),我们主要聊到了我参与维护的一个线上NodeJS服务,关于它的现状和当下的不足.他向 ...

  6. Quartz_理解2

    一.核心概念   Quartz的原理不是很复杂,只要搞明白几个概念,然后知道如何去启动和关闭一个调度程序即可.   1.Job 表示一个工作,要执行的具体内容.此接口中只有一个方法 void exec ...

  7. Linux(Ubuntu)下载安装破解Matlab2016

    跳过废话, 直接看教程 前言 笔者平常不是很喜欢用Matlab, 因为所需要的功能都能被Python替代, 而Matlab的肥和慢实在令人难以忍受. 在Linux系统下安装Matlab也比Window ...

  8. [Android ADB] An auto-input method for Android and Windows

    The Valentine's Day is coming. Here is an auto-input method and you may use it to send multiple word ...

  9. jenkins全局安全设置

    如何进入安全设置界面          在Jenkins的主界面,点击 configure Global Security 选项,进入Jenkins的系统安全设置界面.安全界面如下图.在这里我们分别介 ...

  10. Android 如何保证service在后台不被kill

    Android 其实无法做多绝对的不被后台kill掉,我们只能尽量使用一些操作提升不被kill的机会. 一.onStartCommand方法,返回START_STICKY   START_STICKY ...