任意浏览器的默认字体高都是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. Tomcat内存溢出

    Tomcat内存溢出的三种情况及解决办法分析 转载于网络  Tomcat内存溢出的原因 在生产环境中tomcat内存设置不好很容易出现内存溢出.造成内存溢出是不一样的,当然处理方式也不一样. 这里根据 ...

  2. Openwrt 初始化脚本

    Openwrt 使用自己的初始化脚本系统,所有的初始化脚本位于 /etc/init.d 目录下. 任何一个初始化脚本必须包含基本的 start() 和 stop() 函数.当系统启动或用户拉起对应的进 ...

  3. Scala 类和对象

    Scala class: Scala 源文件中可以有很多类(class),这些类默认都是Public的,public是Scala的默认访问级别.在Scala中,声明一个未用priavate修饰的字段 ...

  4. c#简单易用的短信发送服务 悠逸企业短信服务

     悠逸企业短信发送服务,是一种比较简单易操作的短信发送服务,使用POST的方式,请求相应地址就可以实现短信发送功能 1 /// <summary> /// 短信发送服务 /// </ ...

  5. CSS行高line-height的一些深入理解及应用

    一.一些字面意思. “行高”大约是指:一行文字的高度.具体来说是指两行文字间基线之间的距离.基线是在英文字母中用到的一个概念,我们刚学英语使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a ...

  6. 关于Windows Boot Manager、Bootmgfw.efi、Bootx64.efi、bcdboot.exe 的详解

    1. http://bbs.wuyou.com/forum.php?mod=viewthread&tid=303679&fromuid=396698

  7. MUI判断网络连接以及监听网络变化JS

    来源:netChange问题:怎么判断网络状态 MUI用于获取当前设备的网络类型 function plusReady(){ var types = {}; types[plus.networkinf ...

  8. Android Paint Xfermode 学习小结

    一.setXfermode(Xfermode xfermode) Xfermode国外有大神称之为过渡模式,这种翻译比较贴切但恐怕不易理解,大家也可以直接称之为图像混合模式,因为所谓的"过渡 ...

  9. ios获取相册图片 压缩图片

    从摄像头/相册获取图片 刚刚在上面的知识中提到从摄像头/相册获取图片是面向终端用户的,由用户去浏览并选择图片为程序使用.在这里,我们需要过UIImagePickerController类来和用户交互. ...

  10. IDA Pro使用

    当我们的光标在某个函数处时,按回车键就可以跳到这个函数所在的位置: