这期简单说说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. C++第一天学习

    代码1 #include<iostream> int main(){ int a; std::cout << "hello c++" << st ...

  2. Oracle 去掉重复字符串

    create or replace function remove_same_string(oldStr varchar2, sign varchar2) return varchar2 is /** ...

  3. 如何做到Zero Downtime重启Go服务?

    graceful的实践 使用endless库来实现,比如接入gin: r := gin.Default() r.GET("/", index) endless.ListenAndS ...

  4. 如何开发基于Dubbo RPC的分布式服务？

    什么是Dubbo? Dubbo能做什么? 在Crystal框架下,如何开发基于Dubbo RPC的服务? 在Crystal框架下,如何调用Dubbo RPC服务? 相关的文章 什么是Dubbo? Du ...

  5. android 获取日期

    */ public static HashMap<String, String> computeDate(){ Calendar cal =Calendar.getInstance(); ...

  6. [CSS3] 学习笔记-CSS选择器

    CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...

  7. java 文件操作 写入和读取（小结一）

    参考了这篇博客并优化,谢谢:http://blog.sina.com.cn/s/blog_99201d890101b4le.html 功能:  实现通过两个类完成先写入文件,再读取数据计算显示 pac ...

  8. HTML5 DOM扩展

    一.选择符 1. querySelector()方法:返回与该模式匹配的第一个元素 //取得body元素 var body = document.querySelector("body&qu ...

  9. OSS项目进度（2.19）

    前两周先后完成了OSS.Common ,OSS.Http ,OSS.Social 项目的.net standard支持,再次开始进入框架本身的开发,今天进度情况: 一.OSS.Social 完成摇一摇 ...

  10. iOS开发～制作同时支持armv7,armv7s,arm64,i386,x86_64的静态库.a

    一.概要 平时项目开发中,可能使用第三方提供的静态库.a,如果.a提供方技术不成熟,使用的时候就会出现问题,例如: 在真机上编译报错:No architectures to compile for ( ...