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. 我眼中的java线程池实现原理

    最近在看java线程池实现方面的源码,在此做个小结,因为网上关于线程池源码分析的博客挺多的,我也不打算重复造轮子啦,仅仅用纯语言描述的方式做做总结啦! 个人认为要想理解清楚java线程池实现原理,明白 ...

  2. MP4命令行处理

    MP4Box可用于生成符合MPEG-DASH规范的内容,也就是ISO / IEC 23009-1在ISO公共可用标准中可用的内容. dash切片命令: mp4box -dash 5000 -frag ...

  3. 租了一台华为云耀云服务器，却直接被封公网ip，而且是官方的bug导致！

    小弟在博客园也有十多个年头了,因为离开了.net圈子,所以很少发文,今天可算是被华为云气疯了.写下这篇文章,大家也要注意自查一下,避免无端端被封公网ip. 因为小弟创业公司业务发展,需要一个公网做宣传 ...

  4. LAMP介绍以及Apache安装

    一.LAMP架构介绍 1.1 LAMP概述 LAMP架构是目前成熟的企业网站应用模式之一,指的是协同工作的一整套系统和相关软件,能够提供动态Web站点服务及其应用开发环境.LAMP是一个缩写词,具体包 ...

  5. 华为eNSP基础入门-配置SSH远程登录

    eNSP 华为模拟器ensp (Enterprise Network Simulation Platform) 是华为官方推出的一款强大的图形化网络仿真工具平台,主要对企业网路由器.交换机.WLAN等 ...

  6. 这个 Redis 连接池的新监控方式针不戳~我再加一点佐料

    Lettuce 是一个 Redis 连接池,和 Jedis 不一样的是,Lettuce 是主要基于 Netty 以及 ProjectReactor 实现的异步连接池.由于基于 ProjectReact ...

  7. 2020互联网寒冬之下,作为一个Android老码农,是如何进入腾讯的？

    由于众所周知的原因,原生Android开发如今已经日渐凋敝,作为一个Android程序员,不仅要会Java,Kotlin,JavaScript,Css,Html,还要会Flutter,C++,FFmp ...

  8. HDFS总结

    hadoop分布式文件存储系统,用来解决海量数据的存储问题 HDFS的组成------核心配置文件:hdfs-site.xml.core-site.xml NameNode:负责整个HDFS集群的管理 ...

  9. @Value(value="${***.***}")配置文件赋值给static静态变量

    public static String topicName; @Value("${activemq.topicName}") public void setTopicName(S ...

  10. mybatis源码核心代码

    /** * mybatis源码测试类 * @param args * @throws IOException * @see org.apache.ibatis.session.Configuratio ...