我们最常用的字体单位是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. oc-05-对象的创建

    // 11-[掌握]创建一个对象并访问成员变量 #import <Foundation/Foundation.h> //声明 @interface Person : NSObject//类 ...

  2. 【ZZ】常用推荐算法

    http://liyonghui160com.iteye.com/blog/2082450 在推荐系统简介中,我们给出了推荐系统的一般框架.很明显,推荐方法是整个推荐系统中最核心.最关键的部分,很大程 ...

  3. xmpp搭建服务器

    二.环境配置1.安装mysql2.修改mysql的帐户的密码>sqlite(移动平台) ,是没有密码直接连接数据库>mysql sqlServer (服务端的数据库) 是有帐户和密码  默 ...

  4. Recovery启动流程(2)---UI界面

    转载请注明来源:cuixiaolei的技术博客 Recovery启动流程系列文章把recvoery目录下文件分成小块讲解,最后再以一条主线贯穿所有的内容.这篇文章主要讲解Recovery-UI的相关内 ...

  5. django–url

    当我们创建了一个项目时,系统为我们创建了一份urlconf, 它可能是这样的: urlpatterns = [ url(r'^admin/', admin.site.urls), ] r'^admin ...

  6. 关于 VS2012 创建 MVC4 Empty 项目的一个小问题

    今天下午发现一个新建的项目工作异常,主要表现为应该返回JSON的Action没有返回JSON字符串,而是返回了JsonResult的对象名,即字符串“System.Web.Mvc.JsonResult ...

  7. 给jdk写注释系列之jdk1.6容器(3)-Iterator设计模式

    前面讲了两种List,一种基于数组实现的ArrayList,一种基于链表实现的LinkedList,这两种list是我们工作中最常用到的List容器.当然数组和链表也是两种常见的基本数据结构,其他基本 ...

  8. javaweb学习总结十四(xml约束之Schema)

    一:schema约束简单介绍 1:xml Schema的定义以及优缺点 2:xml schema入门 3:命名空间 这里http://www.itcast.cn 并没有什么具体的意义,只是命名而已. ...

  9. [改善Java代码]优先选择线程池

    在Java1.5之前,实现多线程编程比较麻烦,需要自己启动线程,并关注同步资源,防止线程死锁等问题,在1.5版本之后引入了并行计算框架,大大简化了多线程开发. 我们知道线程有5个状态:新建状态(New ...

  10. 关于Talend的Patch分支对应Eclipse开发环境的配置总结.

    给产品打patch有时候会遇到很多问题,给产品打patch而且大多数是给很多老版本的Studio打,而且要有对应的patch的开发环境. 但是不巧有些patch对应的git仓库目录结构和一些其他版本的 ...