我们最常用的字体单位是PX和EM。

首先px：

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

px会随着屏幕分辨率的改变而改变，但是浏览器对页面进行缩放时会对页面的整体布局产生影响。

em：

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

em一般会以<body>的font-size为基准，他继承于父级元素。如果多层嵌套比较容易引起混乱。例如:

<body>

　　<div>

　　　　<p></p>

　　</div>

</body>

如果body中设置字体为10px，div中字体为1.2em即12px。那么如果要设置p中字体为12px，则应在p中设置1em而非1.2em。若在p中设置1.2em，则字体实际大小为1.2*1.2=1.44。

而css3出现了一个新的单位rem

使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素，而非em相对的父级元素。

也就是说你可以在html节点定义一个单独的字体大小，然后所有其他元素使用rem相对于这个字体的百分比进行设置，这样就意味着，我们只需要在根元素确定一个参考值，在根元

素中设置多大的字体，这完全可以根据您自己的需要。

比如：

html{font-size:62.5%}/*根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。

body{font-size:1.2rem}/*12px*/

h1{font-size:1.4rem}/*14px*/

具体换算参考http://pxtoem.com/

看了些关于rem的知识点，在这做个自我总结归纳的更多相关文章

  1. IOS学习笔记48--一些常见的IOS知识点+面试题

      IOS学习笔记48--一些常见的IOS知识点+面试题   1.堆和栈什么区别? 答:管理方式:对于栈来讲,是由编译器自动管理,无需我们手工控制:对于堆来说,释放工作由程序员控制,容易产生memor ...

  2. javascript 容易忽略的小知识点 new到底做了什么？

    问题:平时我们经常写 var ss = new Person():ss就是一个由'Person类'生成的对象了,可是我们的Person方法里却没有写 return: (var ss= Person() ...

  3. LeetCode 87，远看是字符串其实是搜索，你能做出来吗？

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第54篇文章,我们一起来看LeetCode 87题,Scramble String(爬行字符串). 这题的官方难度 ...

  4. 一文看懂：ChIP实验和qPCR定量分析怎么做｜易基因技术

    大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因. 染色质免疫共沉淀(Chromatin Immunoprecipitation,ChIP),是研究体内蛋白质与DNA相互作用的经典方法. ...

  5. Android 的 so 文件加载机制

    本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 最近碰到一些 so 文件问题,顺便将相关知识点梳理一下. 提问 本文的结论是跟着 System.loadlibrary() 一层层源 ...

  6. 插件化框架解读之so 文件加载机制（四）

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 提问 本文的结论是跟着 System.loadlibrary() ...

  7. MemSQL分布式架构介绍(一)

    最近在了解MemSQL架构,看了些官方文档,在这里做个记录,原文在这里:http://docs.memsql.com/latest/concepts/distributed_architecture/ ...

  8. JAVA开发：分享一些SpringMvc+Ibatis+spring的框架使用心得

    近期不在做.net的项目,而是使用java作为开发语言,就想着要用springmvc开发了,由于前些年也用过struts1/2+hibernate/ibatis+spring开发过项目,因此是有些底子 ...

  9. DB2开发系列之一——基本语法

    最近看了些db2开发方面的资料,现做摘要,以供自己和大家参考: 1.变量声明 DECLARE v_salary DEC(9,2) DEFAULT 0.0; DECLARE v_status char( ...

随机推荐

  1. iOS开发——UI篇OC篇&UIView／UIWindow／UIScreen／CALayer

    UIView/UIWindow/UIScreen/CALayer 1.UIScreen可以获取设备屏幕的大小. 1 2 3 4 5 6 7 // 整个屏幕的大小 {{0, 0}, {320, 480} ...

  2. android146 360 病毒查杀

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. 详解SQL Server连接（内连接、外连接、交叉连接）

    在查询多个表时,我们经常会用“连接查询”.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 什么是连接查询呢? 概念:根据两个表或多个表的列之间的关系,从这些表中查询数据 ...

  4. B - Plane of Tanks: Pro

    Description Vasya has been playing Plane of Tanks with his friends the whole year. Now it is time to ...

  5. Android 高级UI设计笔记04：使用setDrawingCacheEnabled(boolean flag)提高绘图速度

    1. View组件显示的内容可以通过cache机制保存为bitmap, 使用到的API有: void setDrawingCacheEnabled(boolean flag) Bitmap getDr ...

  6. javascript 关于语义化作用的理解

    看代码实例1 var a=1; function m(a){ //此处为形参第一个传入函数的参数,既为arguments[0] alert(a); //此处a为与形参绑定的 } m(a);//1 此时 ...

  7. 使用 Feedly RSS阅读器订阅技术大牛的博客

    这几天一直都在自己看书,可是书上面的东西都比较落后一点,而且没有大牛博文上的东西讲的深入,可是来回跳转各位大牛的博客又非常的麻烦,有一些公众账号虽然也会推荐一些知识内容,可是你应该有过看到多个公众号发 ...

  8. 程氏CMS去掉静态页面的隐藏性版权方法

    程氏CMS去掉静态页面的隐藏性版权方法 实例如图: 因为之前自己找了好久都没找到这俩代码写在那个文件夹的,经过跟csqq8讨论了也没有得到结果,今天突然发现,原来这些代码都经过base64加密,用加密 ...

  9. oracle中的sql%rowcount

    sql%rowcount用于记录修改的条数,就如你在sqlplus下执行delete from之后提示已删除xx行一样,这个参数必须要在一个修改语句和commit之间放置,否则你就得不到正确的修改行数 ...

  10. nodejs自己在项目中使用的一个工具库utils.js文件

    文件内容如下: /** * utils.js */ var crypto = require('crypto'); var url = require('url'); var querystring ...