css3中rem和px有哪些区别

今天小编给大家分享一下css3中rem和px有哪些区别的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

CSS3中rem和px的区别是：px是相对长度单位，是相对于显示器屏幕分辨率而言的；而rem虽然也是相对单位，但是是相对于html根元素而言的。

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3中rem和px有什么区别

1、px是相对长度单位，它是相对于显示器屏幕分辨率而言的。

优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

3、rem是CSS3新增的一个相对单位，REM是相对单位，是相对HTML根元素。当在根元素中使用rem设置font-size时，此时的1rem等于浏览器默认字体大小，大多数浏览器默认大小为16px

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

拓展资料

px：

px实际上就是像素，用PX设置字体大小时，比较稳定和精确。

但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的WEB页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破，这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。

rem：

rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

例子：

p {font-size:14px; font-size:.875rem;}

以上就是“css3中rem和px有哪些区别”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网JavaScript频道。