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. python中的abstractmethod

    # -*- coding: utf-8 -*- from abc import ABC ,abstractclassmethod from collections import namedtuple ...

  2. 常见的BI软件有哪些_BI工具软件哪个好用

    世界越来越以数据的驱动.数据分析是帮助企业深入了解自身业务表现(例如正在做什么或哪块业务需要注意和改进)的重要元素.为了获得更直观的展现,数据分析软件可帮助公司通过报告.数据可视化.应用程序等从数据中 ...

  3. 构建前端第4篇之---使用css用法 height

    张艳涛 写于2021-1-20 height: 100%; What:  html的元素标签,例如 <html>,<body>,<div>都有height的css属 ...

  4. java顺序结构、循环结构、选择结构

    java顺序结构.选择结构.循环结构 顺序结构: 语句与语句之间,框与框之间是从上到下的顺序进行的,它是由若干个依次执行的处理步骤执组成的,它是任何一个算法都不离开的一种基本算法结构. 选择结构: 1 ...

  5. Elsevier（爱思唯尔）期刊模板的使用

    1.爱思唯尔(Elsevier)期刊模板的使用 2.sci论文(以Elsevier为例) latex文件从小白到投稿 3.初次使用爱斯维尔(Elsevier)论文模板遇到的坑 4.latex学习 da ...

  6. Hybrid接口

    目录 一.Hybrid接口 1.1 VLan的基本概念 1.2 Hybrid接口特点 1.3 Hybrid接口工作原理 1.4 Hybrid配置 一.Hybrid接口 1.1 VLan的基本概念 特点 ...

  7. AcWing 第11场周赛题解

    计算abc 首先 \(0<=a<=b<=c\) 会随机给出 \(a+b,a+c,b+c,a+b+c\)的值 因为\(a,b,c\)都为正整数,所以\(a+b+c\)一定为最大值 然后 ...

  8. Android程序员提加薪被拒，刷2000题跳槽涨薪50%！

    为什么想跳槽? 简单说一下当时的状况,我在这家公司做了两年多,这两年多完成了一个大项目,作为开发的核心主力,开发压力很大,特别是项目上线前的几个月是非常辛苦,几乎每晚都要加班到12点以后,周末最多只有 ...

  9. A*算法寻路（C++代码实现）

    A*(A-Star)算法是一种静态路网中求解最短路径最有效的直接搜索方法,也是解决许多搜索问题的有效算法.算法中的距离估算值与实际值越接近,最终搜索速度越快.--来自百度百科. 我在网上看了不少关于A ...

  10. Java8新特性（二）之函数式接口

    .subTitle { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); border- ...