当前位置：首页 > news >正文

px、em、rem、rpx 作用和用法详解

news 文章来源：https://blog.csdn.net/weixin_62980497/article/details/140070776 2024/7/6 17:35:43

px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以

em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是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作为单位就行了。
所以我们在写CSS的时候，需要注意两点：

上的中国网民使用IE浏览器(或内核)。

body {font-size: 62.5%;
}.banner {width: 30em;
}

rem
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

前端使用rem的实例
以下例子中都是 1rem = 100px，即rem=设计稿尺寸/100。之所以不配置成1rem=1px，是因为浏览器一般都有最小字体限制，比如chrome，最小中文字体是12px，所以实际上没有办法让1rem = 1px。

在html 中使用

<script>const pcDesignWidth = 1440;const mobileDesignWidth = 750;document.documentElement.style.fontSize = window.innerWidth * 100 / (window.innerWidth > mobileDesignWidth ? pcDesignWidth : mobileDesignWidth) + 'px';/*如果只适配一端const designWidth = xxxdocument.documentElement.style.fontSize = window.innerWidth * 100 / designWidth + 'px'*/
</script>

function getInitStyle() {const width = window.document.documentElement.clientWidth > 768 ? 768 : window.document.documentElement.clientWidth;const height = window.document.documentElement.clientHeight;const maxWidth = (window.document.documentElement.clientWidth <= 768 || height * 2 / 3 > width) ? width : height * 2 / 3;document.documentElement.style.fontSize = `${maxWidth * 100 / 750}px`;document.body.style.width = `${maxWidth}px`;
}

rpx
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rpx 为小程序中使用的相对单位，用法和rem类似， 1rpx = 屏幕宽度/750 px, 所以在屏幕宽度为750的设计稿中，1rpx = 1px。

相关文章：