首页  >  文章  >  web前端  >  css3中rem和px有什么区别

css3中rem和px有什么区别

WBOY
WBOY原创
2022-03-21 15:13:043026浏览

css3中rem和px的区别是:px是相对长度单位,是相对于显示器屏幕分辨率而言的;而rem虽然也是相对单位,但是是相对于HTML根元素而言的。

css3中rem和px有什么区别

本教程操作环境: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;}

(学习视频分享:css视频教程

以上是css3中rem和px有什么区别的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn