web开发中的长度单位（px,em,ex,rem），如何运用，看完这篇就够了！

原创 2017-03-08 web小二 web前端开发

作为一名前端开发人员，css中的长度单位，都是我们在工作中非常熟悉的名词，因为没有它们，我们就不能声明某个字符应该多大，或者某些图像周围应该留白多少，甚至有时候能导致css不能进行正常工作，所以在很多css属性中，它们都是依赖于长度单位来显示各种页面元素。

1、长度单位包括哪些？

长度单位，其实在我们的生活中，也非常常见，例如，厘米、毫米、英寸，还有经常接触到的像素（px），元素的字体高度（em）、字母x的高度（ex）、百分比（%）等等这些单位，但是我们都可以将它们归结为两大类别：第一类，就是绝对长度单位；第二类，就是相对长度单位。

2、绝对长度单位

那什么是绝对长度单位？具体有哪些？又是怎么进行应用的呢？

绝对长度单位比较好理解，它就是一个固定的值，一个真实的物理值，它不随设备或者受别的因素影响的长度单位。

具体的绝对长度单位主要包括以下几个：

1）、cm，厘米：一个长度计量单位，1m=100cm。

2）、mm，毫米：与厘米一样，也是一个长度计量单位，1cm=10mm；毫米同时还是降雨量的计量单位。

3）、in，英寸：这个是美国尺子上都有的单位，1英寸=2.54厘米，12英寸=1英寸。

4）、pt，点（points）：一个印刷度量单位，1英寸相当于72点，例如，将元素p设置为24点的话，就是1英寸的三分之一（1/3）；所以，p{font-size：24pt；}与p{font-size：0.33in；}是等价。

5）、pc，派卡（Picas）：一个印刷术语，1派卡相当于12点，6派卡相当于1英寸。

当然，由于这些单位都是绝对长度单位，在我们的web开发中，运用比较少，主要是因为绝对长度单位不利于页面屏幕的渲染，他们更多的是被用在印刷、打印等方向。

3、相对长度单位

相对长度单位，我们都见得比较多，例如，px，em，ex，rem；这些都是相对长度单位。

1）px，像素：px是相对于显示器屏幕分辨率而言。用px设置字体大小时，可能比较稳定和精确。但是这种方法存在一些问题，例如：IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是96%以上的中国网民还是喜欢使用IE浏览器。为了保证用户体验和web页面效果，所以在web开发中还引入了“em”这个长度单位。

2）em，元素的字体高度：em是相对于父元素的属性值而计算的，所以em是非具体的数值。它需要一个参考点，一般都是以<body>的“font-size”为基准。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em= 16px。有时为简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%,此时1em=16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说换算时只需将原有px数值除以10，然后换上em作为单位即可。 em 的值并不是固定的；em的值会继承父级元素的字体大小。

3）ex，所有字体元素中小写x的高度：这个主要与字体有关，不同的字体，即使设置了相同的字体大小，但是ex的值也有可能不同，主要是因为字体的x高度可能不同。不过这个在我们实际开发中运用比较少，一般设置em后，ex就会默认为em的一半，也有为计算方便，将1ex假设等于0.5em,原因在于，大多数的字体的小写字母都是相应大写字母高度的一半。

4）rem，元素字体高度：与em相比较多了一个"r"，是CSS3新增的一个相对单位，是root em，简写rem，这个单位与em的区别在于，使用rem为元素设定字体大小时，rem相对的只是HTML根元素。通过rem，既可以做到只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除IE9以下的版本外，所有浏览器均已支持rem。

另外，我们在开发中还需要注意两点：

第一，若rem没有在根元素（html字体）指定参照值，那浏览器默认1 rem就是16px,若rem有指定值，则1rem就是等于指定值。

第二，html设置为62.5%或者10px时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。

写在最后

在开发中，我们到底如何选择长度单位，需要根据实际开发中的具体需求来，例如，像我们这边有的项目，只需在pc上浏览，不需要在移动端进行浏览的，也不需要做响应式开发的，其实整个页面单位，用px,就可以满足开发需求了；而有的项目，可能需要做响应式开发的，那就要看具体情况而定，但是不管怎么样，你把长度单位的基本属性与本质弄明白了，怎么选用，是非常简单的事情，今天的这篇文章，希望能给大家一点启发，也希望能帮助到那些对基础知识点还不了解的同学。

最后，我跟大家分享一个在线px,em,rem单位转换工具，地址：http://pxtoem.com/；在这里，我就不截图了，因为我自己配置的二手电脑，又花屏了，我要写完这篇稿子，准备拆机箱了，一个姑娘家，家里什么东西坏了，都是自己修，电脑坏了，自己修，无线网络不通了，自己修，网络电视，也要自己搞，这就是找个IT女的好处，今天是三八妇女节，请我们的男同胞们，好好珍惜你身边的IT女。最后，说一句，本人也是女子一枚，请大家以后在微信上，不要再叫我哥了，叫我小二就好。女子节，祝天下女子越活越年轻！

转载于:https://www.cnblogs.com/webxiaoer/p/6626186.html

web开发中的长度单位（px,em,ex,rem），如何运用，看完这篇就够了！相关推荐

asp开发工具_VSCode搭建完美的asp.net core开发环境，看完这篇就够了
引言由于.net core的全面跨平台,我也在之前的一篇文章中介绍了如何在深度Deepin操作系统上安装并搭建.net core的开发环境,当时介绍的是安装.net core和使用Rider.net ...
freertos源码详解与应用开发 pdf_互联网企业面试必问Spring源码？搞定Spring源码，看完这篇就够了...
不用说,Spring已经成为Java后端开发的事实上的行业标准.无数公司选择Spring作为基本开发框架.大多数Java后端程序员在日常工作中也会接触到Spring.因此,如何很好地使用Spring, ...
子进程中获取父进程id_进程全家桶，看这一篇就够了 | 原力计划
作者 | 看,未来责编 | 王晓曼出品 | CSDN博客初见进程,先查一下户口 1.进程环境进程控制块PCB:就是进程在操作系统中的"户口",具体实现是 task_stru ...
tensorflow官方中文文档（各种tf函数解释，看这一篇就够了）
https://www.w3cschool.cn/tensorflow_python/tf_nn_max_pool.html
认识css长度单位 px % em rem vh vw
目录长度单位 px % em rem vh.vw 总结长度单位在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
第123天：移动web开发中的常见问题
一.函数库 underscoreJS _.template: <ol class="carousel-indicators"><!--渲染的HTML字符串--&g ...
Web开发中的弹出对话框控件介绍
Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了.不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由 ...
em表示什么长度单位_html 常见的长度单位”px em pt” 简介说
摘要: 下文讲述常见的长度单位"px em pt"功能说明,如下所示: px.pt.em单位简介说明 px:像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐: ...
038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

web开发中的长度单位（px,em,ex,rem），如何运用，看完这篇就够了！

web开发中的长度单位（px,em,ex,rem），如何运用，看完这篇就够了！相关推荐

最新文章

热门文章