css中的单位px-em-rem

最新推荐文章于 2025-04-26 21:45:29 发布

原创最新推荐文章于 2025-04-26 21:45:29 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

每日必读同时被 2 个专栏收录

8 篇文章

订阅专栏

css/css3

5 篇文章

订阅专栏

本文深入探讨了PX、EM和REM三种CSS单位的特点及应用。解析了它们在不同浏览器下的表现，尤其强调了REM在响应式设计中的优势，包括等比缩放原理及其在实际开发中的使用步骤。

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

PX特点

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

rem特点

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是
一个例子：
p {font-size:14px; font-size:.875rem;}
注意：
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

关于rem的使用步骤

先设置header里面的meta标签（meta:vp 快捷键）

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

在header写上

 <script type="text/javascript">
 	//网页打开马上执行remChange
    remChange();
    //监听浏览器resize事件，当屏幕宽度发生改变执行remChange
    window.addEventListener('resize',remChange);
    function remChange() {
        var html = document.querySelector('html');
        var width = html.getBoundingClientRect().width;
        如果屏幕宽带大于750则等于750
        if( width >= 750 ){
            width = 750;
        }
        //根标签字体大小等于屏幕宽带除于10，也就是1rem等于屏幕的十分之一
        html.style.fontSize = width / 10 + 'px';
    }
 </script>

tip:根标签字体大小=屏幕宽度/100 + “px”;
这里的10根据自己的习惯设置，也可以设置为100。主要是方便后期的计算。
以320px为例可以得出根标签的字体大小等于32px，刚好是屏幕的十分之一。
例子：750px宽度下，一个div的宽度为50px，如何利用rem转换成320屏幕下的宽度。
首先我们先计算出50px，在750px下是等于多个rem 50/75（rem）=0.06667rem；
那么在I5 320px下，应该呈现的宽带=0.6666732(rem)=21.33333px
下I6 375px，应该呈现的宽带=0.6666737.5(rem)=25px
在实际开发中，我们为了提高开发效率，通常喜欢用sass或less来开发。
那么我们必须在less中声明一个变量

@rem:750/10rem

这里的750是设计稿的宽度
也可以是640

那么后期的转换就是
在I5 320px下

div{
	width:50/@rem;
}

通过转换后
在I5 320px下，

div{
	width:0.6666666666666666rem;
	//根据根标签字体大小会转换成21.33333px
}

下I6 375px

div{
	width:0.6666666666666666rem;
	//根据根标签字体大小会转换成25px
}

总结步骤：

在head设置meta视口缩放功能
在head里面编写js代码，获取视口宽度，设置根标签字体大小
使用预编译less或sass来编写css代码；
less使用的时候，在开头设置变量@rem=750(设计稿)/10rem；
后期使用
宽度=设计稿中测量的宽度/@rem变量；

原理：
其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊

假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比