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通过sha1和base64生成签名

    一.python生成时间戳 # 案例 生成时间戳 import time t = time.time() print(t) # 原始时间数据 print(int(t)) # 秒级时间戳 print(i ...

  2. JIS-CTF_VulnUpload靶机

    仅供个人娱乐 靶机信息 下载地址:https://www.vulnhub.com/entry/jis-ctf-vulnupload,228/ 一.网卡设置 设置为NAT模式, 使用vi去修改/etc/ ...

  3. SprintBoot简单入门

    1.什么是SpringBoot SpringBoot是基于Spring的基础上提供了一套全新的框架,其目的是为了在开发时简化Spring的相关配置及开发过程.在SpringBoot未出来之前,准备搭建 ...

  4. 使用C#winform编写渗透测试工具--SQL注入

    使用C#winform编写渗透测试工具--SQL注入 本篇文章主要介绍使用C#winform编写渗透测试工具,实现SQL注入的功能.使用python编写SQL注入脚本,基于get显错注入的方式进行数据 ...

  5. centos7 下安装docker报错：You could try using...

    搞了台VPS,想要装docker,发现死活装不上,各种报错.之前系统是centos6,发现官方现在已经不支持centos6了,遂升级到centos7,然后还是出现下面这个错误. Error: Pack ...

  6. 控制流程之if判断与while、for循环

    一.if判断 1.什么是if判断? 接收用户输入的名字 接受用户输入的密码 如果用户输入的名字=正确的名字 并且 用户输入的密码=正确的密码 告诉用户登录成功 否则, 告诉用户登录失败 2.为何要有i ...

  7. 学习Android Jetpack? 入门教程和进阶实战这里全都有！

    前言 2018年谷歌I/O,Jetpack横空出世,官方介绍如下: Jetpack 是一套库.工具和指南,可帮助开发者更轻松地编写优质应用.这些组件可帮助您遵循最佳做法.让您摆脱编写样板代码的工作并简 ...

  8. 7年老Android收到阿里offer，跟领导提离职被怼：为年薪百万不做兄弟？

    在当今社会,钱就是衡量一个人价值的标准,如果你在一家公司,领导再怎么重用你,但是薪资待遇却很低,这样根本是很难留住人,毕竟工作就是为了赚钱,要是连工资都满足不了,谈其他根本就是扯淡. 最近在职业论坛看 ...

  9. Pikachu-Over Permission模块

    一.概述 如果使用A用户的权限去操作B用户的数据,A的权限小于B的权限,如果能够成功操作,则称之为越权操作. 越权漏洞形成的原因是后台使用了 不合理的权限校验规则导致的. 一般越权漏洞容易出现在权限页 ...

  10. NOIP 模拟 9 考试总结

    T1 一道推规律的题,没想出来,暴力打得常数还太大了,挂了不少 题解 T2 这是一道二分题,很巧妙,但是对于想我一样懒得人,那个数据结构就水过去了 (裸的分块加强大的卡长和合适的块的大小可以卡过去) ...