px,em,rem的区别

本文详细解析了网页设计中px, em, rem三种单位的区别。px是固定像素值,em是相对父元素的长度单位,而rem则相对HTML根元素。通过调整根元素字体大小,可以统一调整所有元素的大小。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在分析px,em,rem的区别前,我们首先要知道——所有浏览器的默认字体高度为16px。

1、px

px是指像素,相对于显示器屏幕分辨率,是固定的值。

2、em

em是相对父元素的长度单位。

当没有自己设定父元素,则默认相对HTML根元素,即1em = 16px。 

为了计算方便,在使用 em 时,将父元素设置为10px,100px等更加方便计算,即 1em = 10px  或  1em = 100px 。当父元素字体大小改变,子元素字体大小随之改变。

3、rem

rem也是相对长度单位但相对的是HTML根元素。

这使得 rem em 使用更加简单,只需改变HTML根元素的字体大小,就可以成比例的调整所有的字体大小。

为了方便使用,将HTML根元素的字体大小设置为 html{font-size:62.5%} ,则16px × 62.5%=10px,即将浏览器的默认字体高度设为10px,此时 1rem = 10px , 1.2rem = 12px。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值