一、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. Alpha项目冲刺! Day3-产出

    各个成员今日完成的任务 林恩:任务分工,博客撰写,完善设置等模块 杨长元:安卓本地数据库基本建立 李震:完成注册页面 胡彤:完善服务端 寇永明:画图,学习 王浩:画图,学习 李杰:画图,学习 各个成员 ...

  2. leetcode 62. Unique Paths 、63. Unique Paths II

    62. Unique Paths class Solution { public: int uniquePaths(int m, int n) { || n <= ) ; vector<v ...

  3. osg::Camera example

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  4. Centos7安装zabbix3.4.0以及配置和使用

    一.安装ZABBIX 1.环境和软件版本 注:此次是采用的rpm包方式安装,所以服务器必须要能连接互联网通过yum方式解决依赖关系 ①系统: [root@zabbix ~]# cat /etc/red ...

  5. java nio Files.newDirectoryStream用法

    try(DirectoryStream<Path> dirStream = Files.newDirectoryStream(Paths.get(directory,"*.ts& ...

  6. 【Leetcode_easy】700. Search in a Binary Search Tree

    problem 700. Search in a Binary Search Tree 参考1. Leetcode_easy_700. Search in a Binary Search Tree; ...

  7. react 表单组件 异步渲染,值不会生效,需要手动改变对应组件的显示值

    楼主遇到这个问题已经是第二次,上次我们项目经理给帮忙解决了一次,这次又遇到了,刚开始不知道是这个问题,上次做的笔记也没找到了,估计又忘记了,这里抽三分钟记录一下, 当然这里这样做有个前提:就是你已经和 ...

  8. Spring Aop(十六)——编程式的自定义Advisor

    转发:https://www.iteye.com/blog/elim-2399437 https://www.iteye.com/blogs/subjects/springaop 编程式的自定义Adv ...

  9. 【ARTS】01_37_左耳听风-201900722~201900728

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  10. ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法

    这个是非常常用的案例,ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法/** * 单文件上传 * name:表单上传文件的名字 * ext: 文件允许的后缀,字符串形式 * path:文件保 ...