最近有朋友在进行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. cpu95%,查找问题sql

    收到一封告警邮件: Load average on xxx_server reached critical threshold values - 169.5 Current Load Avg = 16 ...

  2. PHP mysqli连接MySQL数据库

    1. 开启PHP的API支持 (1)首先修改您的php.ini的配置文件.查找下面的语句:;extension=php_mysqli.dll将其修改为:extension=php_mysqli.dll ...

  3. Angular - - $sce 和 $sceDelegate

    $sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模 ...

  4. oracle语句总结（一）

    1,建外键 新建两个表来实现外键的关联. create table main_tab ( id number, name varchar2(30) ); create table sub_tab ( ...

  5. 使用SimpleAdapter创建ListView

    通过ArrayAdapter实现Adapter虽然简单.易用,但ArrayAdapter的功能比较有限.它的每个列表只能是TextView.如果开发者需呀实现更复杂的列表项,则可以考虑使用Simple ...

  6. Java线程：线程中断

    interrupt方法可以用来请求终止线程. 当对一个线程调用interrupt方法时,线程的中断状态被置位.这时每个线程都有boolean标志.每个线程都应该不时的检查这个标志,以判断线程是否被中断 ...

  7. FMS用AS来实现拉流

    application.onAppStart=function (){ this.myNC=new NetConnection(); this.myNC.onStatus=NC_onStatus; t ...

  8. Bootstrap入门（二十三）JS插件1：模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  9. js 全选/取消

    平时常用一个小功能 var check_all = document.getElementsByName('student_box'); var check_flag = true; function ...

  10. NodeJS Stream 五：双工流

    双工流就是同时实现了 Readable 和 Writable 的流,即可以作为上游生产数据,又可以作为下游消费数据,这样可以处于数据流动管道的中间部分,即 rs.pipe(rws1).pipe(rws ...