任意浏览器的默认字体高都是16px。

px: 像素(Pixel) , 计算机屏幕上的一个点。固定大小；不方便维护；

em：相对于当前对象内 (父元素) 文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(16px)。相对大小；

rem:相对于HTML根元素。相对大小；

(所有未经调整的浏览器都符合: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作为单位就行了。)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html{

            font-size:12px;

        }

        #father{

            font-size: 22px;

        }

        #em{

            font-size: 1em;

        }

        #rem{

            font-size: 1rem;

        }

        #px{

            font-size: 32px;

        }

    </style>

</head>

<body>

 <div id="father">

     <div id="em">我是1em</div>

     <div id="rem">我是1rem</div>

     <div id="px">我是32px</div>

 </div>

</body>

</html>

浏览器的兼容性: 除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。

px和em,rem的区别的更多相关文章

  1. 彻底弄懂css中单位px和em,rem的区别

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

  2. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  3. 彻底弄懂css中单位px和em,rem的区别 转的自己看

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

  4. 弄懂css中单位px和em,rem的区别

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

  5. 【转载】彻底弄懂css中单位px和em,rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

  6. css中单位px和em,rem的区别[转载]

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  7. [转]彻底弄懂css中单位px和em,rem的区别

    难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...

  8. 网页布局设计css中单位px和em,rem的区别

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

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

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

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

    css单位中分为相对长度单位.绝对长度单位. 今天我们主要讲解rem.em.px这些常用单位的区别和用法. px(绝对长度单位) 相信对于前端来说px这个单位是大家并不陌生,px这个单位,兼容性可以说 ...

随机推荐

  1. ToString() 格式化

    c# ToString() 格式化字符串  格式化数值:有时,我们可能需要将数值以一定的格式来呈现,就需要对数值进行格式化.我们使用格式字符串指定格式.格式字符串采用以下形式:Axx,其中 A 为格式 ...

  2. SQL 分组排序、CASE...WHEN...、是否为空 查询

    select  Id,CustomerCode,CustomerName,CreateId,CreateName,Phone,StatusName,(case when phone is not nu ...

  3. 【git】TurtoiseGit使用手册

    A,创建本地分支 操作:Create Branch ->输入本地分支名 -> OK B,创建本地分支和远程分支的映射 操作: 1,拉取远程分支:Fetch -> 选中Arbitray ...

  4. maven中添加proguard来混淆代码

    只要下回插件并添加相应的配置文件即可.本文仅是做下相关记录 1.修改pom.xml添加插件 <plugin> <groupId>com.pyx4me</groupId&g ...

  5. JPG 图片在IE下不能显示的问题

    最近碰到一些客户说,我传的产品图片怎么在网站上无法显示啊.图片也是正常的jpg格式呢.    是的,你传的图片是JPG的,但是怎么就显示不出来呢?    你找深圳网站建设的公司给你建了一个网站,然后在 ...

  6. Mac下MySQL的安装与配置

    之前一直用的是阿里云的服务器,在服务器上装了一个MySQL,但是今天发现到期了,而且续费时发现之前的大学生优惠不能用了,可是明明到6月份,大学生才毕业啊,shit!!!所以没办法只能在自己电脑上装一个 ...

  7. Spring Boot 系列教程19-后台验证-Hibernate Validation

    后台验证 开发项目过程中,后台在很多地方需要进行校验操作,比如:前台表单提交,调用系统接口,数据传输等.而现在多数项目都采用MVC分层式设计,每层都需要进行相应地校验. 针对这个问题, JCP 出台一 ...

  8. jenkins自动部署war包到jetty

    1.把jenkins.war包复制到jetty的webapps下面 2.在jetty的webapps下面新建jenkins.xml文件 内容如下: <?xml version="1.0 ...

  9. jQuery EasyUI的使用入门

    jQuery EasyUI不是什么太高级的东西,就是用jQuery写了很多方法.定义了很多属性,通过调用这些方法.属性,可以达到一些特定的效果,然后我们再根据具体需求微调就好了.至少需要导入两个样式表 ...

  10. jquery对象介绍及一些jquery小特效

    一.jquery对象的介绍. 引入jquery库后,通过形如$("#id")的方式得到的对象叫做jquery对象.如var $uu = $("#username" ...