css单位中px和em以及rem的区别是什么

这篇文章主要介绍“css单位中px和em以及rem的区别是什么”，在日常操作中，相信很多人在css单位中px和em以及rem的区别是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css单位中px和em以及rem的区别是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

十余年的方城网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整方城建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“方城网站设计”,“方城网站推广”以来，每个客户项目都认真落实执行。

css单位中分为相对长度单位、绝对长度单位。

今天我们主要讲解rem、em、px这些常用单位的区别和用法。

px（绝对长度单位）

相信对于前端来说px这个单位是大家并不陌生，px这个单位，兼容性可以说是相当可以，大家对px的了解肯定是没有很大的问题的。

em（相对长度单位）

使用：1、浏览器的默认字体都是16px，那么1em=16px，以此类推计算12px=0.75em，10px=0.625em，2em=32px；

2、这样使用很复杂，很难很好的与px进行对应,也导致书写、使用、视觉的复杂(0.75em、0.625em全是小数点)；

3、为了简化font-size的换算，我们在body中写入一下代码

body {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

这样页面中1em=10px,1.2em=12px,1.4em=14px,1.6em=16px，使得视觉、使用、书写都得到了极大的帮助。

例子如下：

我是1.6em