rem是css3新定义的设置字体大小属性，常用的两种字体大小设置有下面2种：
1、 px为单位
2、em为单位(百分比用法跟em类似)

PX为单位

在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较精确和固定。只要页面某元素设置了px字体大小，其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素高的话，该子元素/子孙元素会继承其父元素的px字体大小设置 。但种方法存在一个问题：当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站用户可读性、用户体验的前端人员来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

em为单位

前面也说了，使用是“px”会在浏览器中放大或缩放浏览页面时页面布局会被打破，要解决这个问题，我们可以使用“em”单位。

在使用“em”作单位时，一定需要知道其父元素的字体大小设置，因为“em”就是一个相对值，而且是一个相对于父元素的字体大小值（缩放比率/缩放因子）

实例：

父元素为16px，子元素设置为1.4em 则子元素实际字体大小16px x 1.4=22.4px

因此 “1.4em”可以是“14px”,也可以是“20px”，或者说是“24px”，总之是一个不确定值，至于确定值是多少，必须知道其父元素的值！

为什么要用rem单位

从上面的介绍可知，px单位的的设置会影响子元素/子孙元素的字体大小显示，而em单位的设置也是根据父元素的字体来确定的。这时候父元素的字体大小设置就显得很关键了！

而rem是相对于页面根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值即可，其它元素设置rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放，字体大小值标准参考图：

我们来看一个简单的代码实例：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算：1.2rem即 12px ，1.6rem即16px  。 如果没有设置，将是以浏览器默认的“16px”为基准 ）。

css之px、em、rem的更多相关文章

  1. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  2. css里px em rem特点（转）

    1.px特点: 1.IE无法调整px作为单位的字体大小: 2.Firefox能够调整px.em和rem. px是像素,是相对长度单位,是相对于显示器屏幕分辨率而言的. 2.em特点: 1.em的值并不 ...

  3. css单位px,em,rem区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  4. css中px em rem vw vh vmax vmin等单位的区别--转载

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

  5. css 单位 px em rem

    http://www.cnblogs.com/leejersey/p/3662612.html

  6. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  7. px,em,rem的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  8. px em rem 区别

    PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样 ...

  9. px,em,rem字体单位

    1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...

  10. 彻底弄懂px em rem

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

随机推荐

  1. javascript学习五---OOP

    面向对象:JavaScript的所有数据都可以看成对象 JavaScript的面向对象编程和大多数其他语言如Java.C#的面向对象编程都不太一样.如果你熟悉Java或C#,很好,你一定明白面向对象的 ...

  2. [NOI 2021] 轻重边 题解

    提供一种和不太一样的树剖解法(一下考场就会做了qwq),尽量详细讲解. 思路 设重边为黑色,轻边为白色. 首先,先将边的染色转化为点的染色(即将 \(u\) 节点连向父节点的边的颜色转化为 \(u\) ...

  3. Django关闭html转义

    我们在views定义的html语句传递到html文件会按照原样式输出,并把我们定义的html标签页输出了,这是因为django模板默认帮我们开起了html转义功能 {{ lp}} <hr> ...

  4. 深度掌握 Java Stream 流操作，让你的代码高出一个逼格！

    概念 Stream将要处理的元素集合看作一种流,在流的过程中,借助Stream API对流中的元素进行操作,比如:筛选.排序.聚合等. Stream 的操作符大体上分为两种:中间操作符和终止操作符 中 ...

  5. JBoss 4.x JBossMQ JMS 反序列化漏洞（CVE-2017-7504）

    检测漏洞 工具 下载地址:https://github.com/joaomatosf/JavaDeserH2HC javac -cp .:commons-collections-3.2.1.jar E ...

  6. centos ansible常用命令

    ansible在日常运维中经常使用,特别是批量执行多台服务器的时候,有效减小重复的操作成本,以下从安装到使用仅讲解工作中常用的几种方式,模块很多功能很强大,但不做全面讨论. ansible安装 在ce ...

  7. Java数组01——声明创建、赋值及特点

    数组声明创建 数组的四个基本特点 例子  package array; ​ public class ArrayDemon01 {     //变量的类型   变量的名字   = 变量的值     / ...

  8. Docker部署Mysql实践

    前言:由于Docker部署容器时,没有指定IP,当机器重启后,容器的IP会变化,所以在创建容器的时候,最好能固定IP:同时,在Ubuntu系统中,每次执行命令,都需要root权限,命令需要加sudo标 ...

  9. 用expect做自动运行脚本

    下面的脚本演示了在Ubuntu上安装expect,写一个切换用户的expect脚本,并运行脚本看到效果的过程. root@guserver:~# apt-get install expect godu ...

  10. Manage Historical Snapshots in Sonarqube

    Login as admin, go to a dashboard of a project, then click "Configuration -> History" a ...