这期简单说说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. Java泛型类型擦除导致的类型转换问题

    初步结论:泛型类型转换不靠谱: 源码: package com.srie.testjava; public class TestClassDefine4<T> { public stati ...

  2. loadrunner Analysis ：SLA（Service Level Agreement服务水平协议）

    SLA是为负载场景定义的具体目标,用于与实际负载结果比较,确定系统是否达到性能目标. 1.1.1     设置SLA(以Transaction Response Time(Average)为例) 可以 ...

  3. eclipse安装git插件

    用Eclipse开发,有时需要团队协作,git就是个比较好的选择.下面简单介绍一下git插件的安装方法:   1.Help -- install new software 打开插件安装界面 2.点ad ...

  4. [源代码] SailingEase .NET Resources Tool （.NET 多语言资源编辑器）

    我在2016年10月发过一篇博客,介绍了我写过的一个多语言资源文件编辑器,并且做为免费软件发布给了出来. 陆续收到了一些朋友的反馈,有朋友很热心提了很多建议和关心的话,还有朋友发红包过来,让我很感动. ...

  5. Ionic在windows下的环境配置难题

    具体的配置方法网上有很多,可以参考http://my.oschina.net/JeeChou/blog/219699?fromerr=k1hPtBUs,但问题还是会有,我总结的主要有以下几个方面: 1 ...

  6. BZOJ2002(分块)

    Bounce 弹飞绵羊 Time Limit:10000MS     Memory Limit:265216KB     64bit IO Format:%lld & %llu Submit  ...

  7. Java各种工具下载

    http://yunpan.cn/cyUzqFTu8pEER  提取码 355c  myeclipse2013 http://yunpan.cn/cyUzPi7nC8Z9S  提取码 fc4b  my ...

  8. CardboardSDK-iOS 源码简单分析

    该项目地址: 地址 克隆地址为 https://github.com/rsanchezsaez/CardboardSDK-iOS.git 目前如果想在iOS设备上实现双目VR的功能,Google 已经 ...

  9. 简单的Elf逆向Writeup

    ElfCrackMe1 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acrony ...

  10. array_count_values:返回数组中所有值出现的次数

    $arr1 = ['a','b','c','d','e','e','a','a']; $arr = array_count_values($arr1);   echo '<pre>'; p ...