一、px、em、rem和%的定义

1.px（像素）

px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。

示例：

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <title>css px像素固定长度单位</title>

  <style type="text/css">

    body{background-color: #aaa;}

   .px{border:1px solid red;width:300px;height:100px;font-size:30px;}

  </style>

 </head>

 <body>

  <div class="px">

   用px单位设置元素的宽高和文本的字体大小

  </div>

 </body>

</html>

运行结果：

2.em（相对长度单位）

em单位用的也比较多，特别是国外；em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，相对于父级元素对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸（16px）。

示例：

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <title>用em相对长度单位来设置文本的字体大小</title>

  <style type="text/css">

    body{background-color: #aaa;}

    .div{border:1px solid red;width:300px;height:100px;font-size:30px;}

    .em{font-size:0.5em;}/*30px x 0.5 = 15px*/

  </style>

 </head>

 <body>

  <div class="div">

   <span class="em">用em相对长度单位来设置文本的字体大小</span>

  </div>

 </body>

</html>

运行结果：

说明：以上实例em是相对于父级元素div的，div设置的字体大小为30px，所以0.5em计算后的字体大小为：30px x 0.5 = 15px

3.rem（css3新增的相对长度单位）

rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <title>用css3新增的相对长度单位rem来设置文本的字体大小</title>

  <style type="text/css">

    body{background-color: #aaa;}

   .div{border:1px solid red;width:300px;height:100px;font-

 size:30px;}

   .rem{font-size:0.5rem;}/*16px x 0.5 = 8px*/

</style>

 </head>

 <body>

  <div class="div">

   <span class="rem">用rem相对长度单位来设置文本的字体大小</span>

  </div>

 </body>

</html>

说明：rem是相对于根元素html元素的，浏览器一般默认字体大小为16px，所有0.5rem的计算后的字体大小为：16px x 0.5 = 8px，跟父元素设定的30px没有关系

4.%（百分比）

%也很常见，它和em差不多一样，都是相对于父级元素。但%可以在很多属性中使用，比如：width、height、font-size等。而em是用来设置字体大小（font-size）的单位，width、height等属性是没有em单位的。

二、px、em、rem和%的区别与总结

  1. px是固定长度单位，不随其它元素的变化而变化；
  2. em和%是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化；
  3. rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化；
  4. px和%用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位
  5. 一般来说：1em = 1rem = 100% = 16 px

css中字体常用单位px、em、rem和%的区别及用法总结的更多相关文章

  1. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  2. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  3. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  4. 搞清css的单位 px,em,rem的区别

    前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...

  5. css单位px,em,rem区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  6. Html 字体大小单位 px em pt

    网页上定义字体大小有常见三种单位,px.em.pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在80 ...

  7. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...

  8. css 单位 px em rem

    http://www.cnblogs.com/leejersey/p/3662612.html

  9. px,em,rem字体单位

    1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...

随机推荐

  1. Linux 一条命令杀死占用端口的所有进程

    Linux 一条命令杀死占用端口的所有进程 2018年05月28日 19:43:05 gq97 阅读数 7655更多 分类专栏: Linux   版权声明:本文为博主原创文章,遵循CC 4.0 BY- ...

  2. SQL优化 | Oracle 绑定变量

    之前整理过一篇有关绑定变量的文章,不太详细,重新补充一下. Oracle 绑定变量 http://www.cndba.cn/Dave/article/1275 一．绑定变量 bind variable ...

  3. c# combbox删除最后一个item界面不更新

    如果c#的combbox删除的item是当前选中的,而且是最有一个(如果不是最后一个,我也不知道会不更新,没有去测试,但是可以收到跟新到其他的item),它不会自动清空显示,而是保存当前选中. 所以要 ...

  4. 002-01-RestTemplate-配置使用说明

    一.概述 Spring RestTemplate 是 Spring 提供的用于访问 Rest 服务的客户端,RestTemplate 提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写 ...

  5. Qt KDChart编译

    最近开发中需要用到甘特图,感觉KDChart这个插件不错,在这里记录一下编译过程(其实很好编译,而且一次性就过了) 下载,kdchart-2.6.1-source,解压 打开src目录,用Qt Cre ...

  6. nginx负载均衡分配策略有哪些？

    nginx负载均衡分配策略有哪些?   答: 1.轮询(默认,不用在upstream中配置)方式 2.weight(权重) 当指定的服务器的权重参数,权重占比为负载均衡决定的一部分.权重大负载就大. ...

  7. CentOS7下搭建zabbix监控（四）——Zabbix报警设置

    CentOS7下搭建zabbix监控(一)——Zabbix监控端配置 CentOS7下搭建zabbix监控(二)——Zabbix被监控端配置 CentOS7下搭建zabbix监控(三)——Zabbix ...

  8. python检测文件的MD值

    使用hashlib模块,可对文件MD5一致性加密验证: #python 检测文件MD5值 #python version 2.6 import hashlib import os,sys #简单的测试 ...

  9. DB2存储过程简单示例

    在这个示例中,我们将在DB2中创建一个名为DEMO1201的存储过程. 该存储过程的输入参数IN_NAME和IN_CREDITCARD,表示用户的姓名和身份证号. 该存储过程的作用是根据身份证号来新建 ...

  10. 记录一次idea的git导致的macpro风扇狂转问题

    现象 macpro风扇忽然狂转不停:使用软件Macs Fan Control检测如下:cpu温度持续过高(超过50度),风扇当前转速比较高 解决 观察cpu使用情况,发现git占用cpu很高,而且持续 ...