2019独角兽企业重金招聘Python工程师标准>>>

rem:
rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem是html字体的1.5倍,0.75rem则是html字体大小的四分之三,依此类推。因此,rem是一个相对长度单位,当改变html根元素的字体大小时,所有以rem为单位的字体大小也会跟着放大或缩小。
当然,它也可以用在其它地方,不一定是字体大小。比如要把某个元素的宽度设为5个字符的宽度,则 {width:5rem}
因为html的任何元素(包括html本身)即使不设置都有默认字体大小的,比如html元素默认的字体大小为16px
那么1rem就等于16px,但是当把html根元素的字体改变大小时,1rem的实际大小也会跟着改变

————————————————————————————————————————

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?

PX特点

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

EM特点

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

所以我们在写CSS的时候,需要注意两点:

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

rem特点

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

p {font-size:14px; font-size:.875rem;}

注意:

选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

在这里为大家提供一个px,em,rem单位转换工具

地址:http://pxtoem.com/

转载于:https://my.oschina.net/u/2444023/blog/737116

彻底弄懂css中单位px和em,rem的区别相关推荐

  1. css中单位px和em,rem的区别

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

  2. 总结css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  3. 为了彻底弄懂CSS中的1px究竟有多长,我翻出了家里的卷尺

    CSS是描述HTML文档如何显示的,在显示的过程中,HTML元素的长宽.间距.字体大小等等,都需要通过长度尺寸单位来表示.我们常常会说:字体大小16像素, 间距10个像素.这里的像素,就是CSS中的长 ...

  4. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  5. CSS中那些px、em、pt、rem、%、dp(android)单位

    http://blog.csdn.net/ime33 未经允许,不得转载!! 水平有限,写的不周之处欢迎指正.交流! 在前端开发中,遇到单位的时候会有几种选择,那到底用哪种单位才是最合适的呢? 在国内 ...

  6. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素): 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印 ...

  7. css样式单位px,em,pt,ex,pc,in,mm,cm详解

    在写css样式的时候最常用的长度单位是px(像素),除此之外经常会碰到em.pt等等. 其实css中的长度单位有px.em.pt.in.ex.pc.mm.cm.ch.rem.vw.vh.vmin.vm ...

  8. px,em, rem的区别,在项目中怎么使用rem.

    一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...

  9. 在html中2em是多少px,在css设置单位px、em、rem哪个更好?

    浏览器最终渲染出的页面是以具体的像素为单位的(因为显示器的显示原理是基于像素的啊),浏览器通过计算em和rem,最终再将这些相对单位转换为具体的像素值渲染出来.这三者可以这样理解: px是绝对单位,独 ...

最新文章

  1. 第一次写KMP的体会
  2. System.OutOfMemoryException
  3. redhat5.5安装oracle10g出现问题
  4. IOS NSPredicate 查询、搜索
  5. 使用maven编译YCSB0.1.4对cassandra进行性能测试
  6. 学院选人的时候会考虑博士和硕士的比例
  7. kubectl 安装
  8. 面试必会系列 - 2.1 MySQL知识点大汇总(基本架构,存储引擎,锁,事务,索引,B+树等等)
  9. flash代码_Flash如何对制作文件进行优化
  10. sublime怎么运行go_使用SublimeGDB调试Go程序
  11. 软件测试 | 手把手教你快速掌握 Monkey 工具,指令参数+APK集合测试
  12. 网络安全态势感知(NSSA)----引言
  13. HashMap底层原理与扩容机制
  14. mysql 随机取数组_sql语句实现随机取n条数据(转)
  15. js中的浅拷贝与深拷贝
  16. [Err] 1418 - This function has none of DETERMINIST
  17. 技能二:数据库(MySQL)·【22江苏转本笔记】
  18. Latex如何插入多个图片,实现并排排列或者多行多列排列
  19. 11,MSI文件简介
  20. 图片批量重命名的2种好方法

热门文章

  1. python3使用cx_Oracle中文乱码
  2. linux中EOF的用法梳理
  3. 数据库事务的四大特性以及事务的隔离级别
  4. Mysql 远程登录及常用命令
  5. 英国政府发布5G政策文件
  6. Android 自定义Dialog背景透明及显示位置设置
  7. 嵌入式Linux常用文件系统
  8. openLDAP的编译安装以及配置
  9. 冒泡排序 选择排序 快速排序(C语言)
  10. [C#学习笔记]C#中的decimal类型——《CLR via C#》