最近有朋友在进行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. Angular - - Angular数据类型判断

    angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. ------------------------ ...

  2. 使用jQuery的时候，js文件代码位置规范

    /** * 页面加载之后执行的函数:===================================== */$(function() { }); //如果需要同步执行需要同时编写在这里: $( ...

  3. Spring @Aspect切面参数传递

    Spring @Aspect切面参数传递: Xml: <?xml version="1.0" encoding="UTF-8"?> <bean ...

  4. Wireshark对常见视频应用的抓包分析的结果

    一.PC端直播: YY客户端直播用的udp(P2P)9158客户端直播用的rtp/rtcp 二.Web端直播: YY网页端直播用的tcp9158网页端直播用的tcp六间房网页端直播用的tcp17173 ...

  5. 关于我的PP0.1聊天软件（客户端）

    登陆界面: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  6. secache 详解

    介绍下secache缓存,它是属于文件缓存.简单来说,文件缓存就是把缓存数据存储到文件系统 (硬盘)中了,比 内存缓存要慢一些,但是也是有一点优点的. 1.磁盘容量大, 2保存到硬盘,说明 掉电后数据 ...

  7. Android开发知识体系总结

  8. js-面试题1

    //1. y 和 z的值? ; ; ; function add(n){n=n+;} y = add(x); function add(n){n=n+;} z = add(x); //y,z输出und ...

  9. javascript设计模式与开发实践阅读笔记（11）—— 模板方法模式

    模板方法模式: 由两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类.通常在抽象父类中封装了子类的算法框架,包括实现一些公共方法以及封装子类中所有方法的执行顺序.子类通过继承这个抽象类,也继 ...

  10. 微服务框架概览之 Netty

    Netty 是什么 Netty 提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序 Netty 架构图 为什么选择Netty 通过对Netty的分析,我 ...