这期简单说说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. QT移植

    QT下载地址:http://download.qt.io/archive/qt/1.编译tslib(touch screen lib) 准备工作:确保以下工具安装完成 sudo apt-get ins ...

  2. CentOS6.5+mysql5.5源码安装

    数据库安装 1新增mysql用户 [root@HE1mysql]# groupadd mysql -g 502 [root@HE1mysql]# useradd -g mysql -s /sbin/n ...

  3. Canvas 阴影效果

    shadow <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. delphi 预览图片2 （MouseUP）

    这个是自己项目在使用的,所以带有些业务功能的代码. 逻辑上使用的大多是 mouseup ,MouseMove,Mousedown.使用recttangle容器实现滑动.网上有这个下载demo. 另外移 ...

  5. ASP.NET Core MVC/WebAPi如何构建路由？

    前言 本节我们来讲讲ASP.NET Core中的路由,在讲路由之前我们首先回顾下之前所讲在ASP.NET Core中的模型绑定这其中有一个问题是我在项目当中遇见的,我们下面首先来看看这个问题. 回顾A ...

  6. BZOJ两水题连发～（BZOJ1854&&BZOJ1191）

    前言:两题都是省选题不过水的惊人,且都可以用二分图最大匹配做哎--- 1854: [Scoi2010]游戏 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: ...

  7. (译)AngularJS1.3.0 开发者指南(四) -- 控制器

    理解Controllers 在AngularJS中, Controller是一个Javascript构造函数, 常常被用来扩展 Angular Scope 对象. 控制器通过 ng-controlle ...

  8. 论SNAPSHOT包的危害性

    先介绍一下背景:我们应用是一个标准的spring+webx工程,博主在一次项目发布前为了再次测试一下自己的代码,将分支部署到日常环境中,但是项目启动的时候报错: 第一眼看到这个堆栈后有点懵逼 第一是上 ...

  9. Java用自定义的类型作为HashMap的key

      需要重写hashCode()和equals()方法才可以实现自定义键在HashMap中的查找. public class PhoneNumber { private int prefix; //区 ...

  10. supervisor踩坑记录

    线上一直以来都在用supervisor管理各项服务,感觉非常舒心,supervisor管理`gunicorn`和`celery`进程,web服务和异步任务各司其职,跑起来一直很稳定. 前段时间却不小心 ...