最近有朋友在进行rem布局的时候总搞不懂rem  em  px  与百分比布局的区别在哪里  这里简单给大家介绍一下

Em为单位：

这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

Rem为单位：

rem是相对于根元素<html>的“font-size”为基准。比如说我们给html设置font-size为100px，

那么我们要给html中的p标签设置16px的字体，font-size设置.16rem就可以，在这里16px=.16rem。

这个单位与em有什么区别呢？

区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

rem与em的更多相关文章

  1. rem、em、px的区别

    px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...

  2. 浅谈rem、em、px

    1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...

  3. rem和em和px vh vw和% 移动端长度单位

    1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...

  4. 从理解开始 谈谈px rem 和 em 的区别与联系

    概述 古语有云,没有规矩则不成方圆.秦灭六国之后为了促进国内生产力的发展,也是大力推进全国度量衡的统一.车同轨,书同文.与"尺寸"相关的问题(手动滑稽),从古至今一直为人们所关注. ...

  5. CSS 中的rem，em，vh，vw一次说清楚

    关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...

  6. 【译】REM vs EM - 世纪之争

    原文链接:https://zellwk.com/blog/rem-vs-em/ 在网络上排版的最佳做法之一是使用像rem和em这样的相对单位. 问题是,你应该使用哪个? 在rem支持者和em支持者之间 ...

  7. rem和em学习笔记及CSS预处理（未完待续）

    以下为读http://www.w3cplus.com/css/when-to-use-em-vs-rem.html的感悟,收获满满! 1.当元素A的字体单位是n rem时,它将根据根元素(html)的 ...

  8. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  9. rem和em学习笔记及CSS预处理

    1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如   parent-div中的em-div的font-size为2rem,他的基准就是html的 ...

  10. rem和em的用法

    1.rem转化为向素值的方法 rem单位转化为像素大小取决于根元素的字体大小,即HTML元素的字体大小,根元素字体大小乘以rem. 例:根元素的字体大小 16px,10rem 将等同于 160px,即 ...

随机推荐

  1. 移动App Crash的测试用例设计

    一些通用的触发移动App Crash的测试场景,如下: 1. 验证在有不同的屏幕分辨率, 操作系统 和运营商的多个设备上的App行为. 2. 用新发布的操作系统版本验证App的行为. 3. 验证在如隧 ...

  2. 解决windows 10 9926 中vmware安装的虚拟机无法桥接上网的问题

    从windows 10 出来之后就安装了使用,但一直有一个问题直到9926也没有解决,那就是vmware下的虚拟机无法桥接上网,但NAT方式正常.发现有一种办法可以实现桥接方式上网.但这种方式下本机与 ...

  3. java如何获取本机IP

    java如何获取本机IP import java.net.*; public class Test6 { public static void main(String[] args) { // TOD ...

  4. 数字操作 转为false的类型 typeof操作符 isNaN函数

    console.group('数字操作'); // 浮点数值的内存空间是整数的两倍: // 会alert出来3e-7;从小数点后面6个0开始,就用科学计数法了: //alert(0.0000003); ...

  5. Linux笔记（十一） - 文件系统管理

    (1)文件系统查看命令:df [选项] [挂载点]-a 显示所有文件系统信息,包括特殊文件系统,如/proc /sysfs-h 使用习惯单位显示容量,如KB,MB或GB-T 显示文件系统类型-m 以M ...

  6. Go并发编程实践

    前言 并发编程一直是Golang区别与其他语言的很大优势,也是实际工作场景中经常遇到的.近日笔者在组内分享了我们常见的并发场景,及代码示例,以期望大家能在遇到相同场景下,能快速的想到解决方案,或者是拿 ...

  7. 关于Coursera上的斯坦福机器学习课程的编程作业提交问题

    学习Coursera上的斯坦福机器学习课程的时候,需要向其服务器提交编程作业,我遇到如下问题: 'Submission failed: unexpected error: urlread: Peer ...

  8. OGG学习笔记04-OGG复制部署快速参考

    OGG学习笔记04-OGG复制部署快速参考 源端:Oracle 10.2.0.5 RAC + ASM 节点1 Public IP地址:192.168.1.27 目标端:Oracle 10.2.0.5 ...

  9. CSS 文件的4种引入方式

    (1)链接式  : 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css  (用得比较多) : < ...

  10. SQLServer2008开放windows防火墙配置

    为了可以通过TCP/IP协议远程访问SQLServer数据库,需要做以下几点: 在SQLServer所运行的服务器上,我们必须找到SQLServer所侦听的端口然后添加到WIndows防火墙的[允许入 ...