1、px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽、比例有可能会不同。假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div宽度为100px,你显示器上看这个div是10厘米,我显示器上看是20厘米。另外一个px点的长宽不一定是1:1的正方形,有的设备上长宽比是不一样的。

  2、em尺寸:所有现代浏览器下默认字体尺寸是16px,这时1em=16px。然后你人为的把body里面定义font-size:12px;(把浏览器默认16px改小了),此刻1em=12px,如果0.8em实际等于12px*0.8;em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了。

另外:em会继承父元素的字体大小,比如:body{font-size: 16px;}p{font-size:0.75em;}span{font-size:2em;}

<html>我大小为16px;<p>  段落文字大小为12px(16*0.75);  <span>    我大小是2em,即24px,这里是相对父级字号*2的,而不是相对body里面的16px  </span></p></html>

  3、Rem,上面你看到了,em相对父级,嵌套一多了算字体到底多大就很操蛋,所以有了Rem(浏览器支持还不是很理想),他只相对html或body的字体尺寸(默认还是16px,除非你自己用font-size定义为其他),没有了继承父级尺寸这个关系。

                                  转自baidu知道

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. How To Join XLA_AE_HEADERS and RCV_TRANSACTIONS? [ID 558514.1]

    Applies to: Oracle Inventory Management - Version: 12.0.6<max_ver> and later   [Release: 12 an ...

  2. React Native知识12-与原生交互

    一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...

  3. (四)Spark集群搭建-Java&Python版Spark

    Spark集群搭建 视频教程 1.优酷 2.YouTube 安装scala环境 下载地址http://www.scala-lang.org/download/ 上传scala-2.10.5.tgz到m ...

  4. mariadb数据库忘记密码如何找回

    1.systemctl stop mariadb ==>停止mariadb数据库 2.mysqld_safe --skip-grant-tables & ==>进入单机模式 3.m ...

  5. SQLite使用(二)&&数据类型

    1.概述 我们熟知的数据库引擎大部分采用静态数据类型,即列定义的类型定义了值的存储,并且值要严格满足列的定义,同一列所有值的存储方式都相同,比如定义了一个列类型为整型 int,不能在该列上输入'abc ...

  6. 如何升级PowerShell

    背景: 开发的PowerShell 脚本需要使用Invoke-RestMethod命令,发现在老的服务器上不支持这一命令,经过查询得知由于PS版本的问题.涉及到了PS的升级,需要介绍下PowerShe ...

  7. [Python核心编程] 第1章 欢迎来到Python世界

    什么是Python Python的起源 Python的特点 下载Python 安装Python 运行Python Python文档 比较Python 其他实现   1.什么是Python        ...

  8. android 获取IMSI信息(判断是移动,联通,电信手机卡)

    首先我们需要知道手机IMSI号前面3位460是国家,紧接着后面2位00 02是中国移动,01是中国联通,03是中国电信.那么第一步就是先获取手机IMSI号码:代码如下 /** *获取IMSI信息 * ...

  9. 基于TQ2440的SPI驱动学习(OLED)

    平台简介 开发板:TQ2440 (NandFlash:256M  内存:64M) u-boot版本:u-boot-2015.04 内核版本:Linux-3.14 作者:彭东林 邮箱:pengdongl ...

  10. (转)NIO与AIO,同步/异步,阻塞/非阻塞

    原文地址: http://www.cnblogs.com/enjoy-ourselves/p/3793771.html 1.flip(),compact(),与clear()的使用 flip()内部实 ...