关于css的font-size的单位rem、em、px的区别

最新推荐文章于 2025-05-17 13:39:32 发布
原创 最新推荐文章于 2025-05-17 13:39:32 发布 · 2.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#rem #px #em

博客介绍了三种长度单位。px是相对长度，与显示屏分辨率相关；em值不固定，继承父级元素字体大小；rem相对于根节点html大小，改变根元素值可改变页面所有以rem为单位的值。

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

px：相对长度，相对于显示屏分辨率而言
em：值不固定，会继承父级元素的字体大小

<div style="font-size:20px">
<p style="font-size:2em">你好</p>
</div>

这里的1em就是父元素的大小为20px，所以2em就是40px
rem：这个是相对于根节点html大小而定，如果根元素的字体大小为16px，那么1rem=16px，该单位只需改变根元素的值的大小就可以改变页面所有以rem为单位的值的大小

font-size : Rem
bluesky
06-29 1067
CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。 前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元...
html手机网站font-size:16em,px、em、rem
weixin_33773670的博客
06-19 899
px、em、rempx 是固定的长度单位em 是父元素的font-size(字体大小)的值，常用来设置首行缩进2em(2字符)rem 是根节点(html，body)的font-size(字体大小)的值，可以用来做移动端的自适应。为什么要适配移动端px像素(pixel)相对长度单位。相对于显示器屏幕分辨率而言。PC端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时p...
CSS的font-size属性及其em值的使用
12-13
定义和用法font-size 属性可设置字体的尺寸。说明该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。可能的值 实例设置不同的 HTML 元素的尺寸： XML/HTML Code复制内容到剪贴板 h1 {font-size:250%;}    h2 {font-size:200%;}    p {font-size:100%}   关于em值的使用问题用ctrl键加鼠标滚轮将页面放大，会带来一个算是小小的BUG，就
CSS3字体大小单位rem及其在响应式设计中的应用
最新发布
weixin_29717341的博客
05-17 390
本章深入讲解了CSS3中的字体大小单位rem，它如何简化字体大小的相对计算，并提供了一个在线工具pxtoem.com以方便像素到em的转换。通过定义根元素的font-size为100%，可以将其他元素的字体大小以rem为单位来设置。rem单位避免了使用em时的继承问题，使得字体大小的计算更为简单直接。同时，本章也介绍了视口尺寸单位vw、vh、vmin和vmax，以及它们在响应式设计中的应用。此外，还探讨了行间距对于提高文本可读性的重要性，并提供了在不同浏览器中设置行间距的建议。最后，章节强调了文本和背景之
响应式网页：使用 rem 设置文字大小
axl---专心专注于web前端开发
08-07 595
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。 当我们每天面对缤纷的互联网世界的时候，文字不仅仅传递给我们众多的信息资讯，而且在设计师的手里，文字在网页中的排版承载着一种艺术的直觉。 网页中常用的文字大小单位是 px(Pixels)，em，现在新增了 rem 这个单位。 一、那...
翻译：CSS3用rem来设置font-size
ZhengGuang
05-15 4039
翻译：CSS3用rem来设置font-size即使在今天，确定字体单位仍然会成为一个激烈话题。不幸的是，各种技术都各有利弊，不能让人满意。问题仅仅是这些不能让人满意的技术中哪一个更可取。其中有两种可取的技术： 1. px 2. em 在我们开始介绍第3种技术前，我们先来回顾这2种。px:在Web发展的早期，我们使用像素来设置文本的大小。它可靠且一致。不幸的是，IE，甚至IE9的
font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配
一个小白的成长历程
03-31 2068
面对不同设备的适配与响应；这里介绍不同的是@media规则进行匹配不同的设备； 不同的设备宽度不尽相同，尺寸有320px,360px,375px,414px…等常见的宽度,面对在不同的尺寸环境下，文字的阅读体验问题，我们常常使用的是CSS单位 - rem； *其中“r“代表的是root的意思，在HTML网页中，root指的就是<html>元素
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
安装它：`npm i px2rem-loader -D`，然后在`vue.config.js`中配置，将.css文件通过`px2rem-loader`转换，指定`remUnit`，如`75`，代表1rem等于75px。 ```javascript module.exports = { chainWebpack: config => {...
postcss-pxtorem移动端适配的实现
01-19
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下，文件内容如下 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >...
关于vue利用postcss-pxtorem进行移动端适配的问题
01-19
刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。稍微坐下总结： 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而...
vue3.0中使用postcss-pxtorem的具体方法
12-13
postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。 前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且...
CSS font-size: em&rem
YuqiRealm.com
06-09 877
字体大小（font-size）单位：em是相对长度单位。它是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。例如：<body> <div id="result"> <p>font-size</p> </div> </body><style type="text/css"> div{
CSS rem单位跟着设备html：font-size改变大小
06-08 493
CSS rem单位跟着设备html：font-size改变大小
关于CSS中px em rem区别与使用介绍
xiaoweids的博客
06-20 225
px是像素图像的基本采样单位，相对于显示器屏幕分辨率而已的，什么是一个像素呢，你把一张图一直放大，会看到一个个小的方格子，一个方格子就是一个像素。rem也是一个相对单位与em的区别是，他是相对于根元素而言的，这样在使用计算时就比em简单方便多了，因为他的参考值就是根元素子图大小，浏览器默认的是16px。em是一个相对单位表示相对于其父亲元素字体的大小而言，可以是小数，整数。字体大小写死固定了，是固定值，老版本IE无法缩放字体，但现在基本上都不用管低版本的IE。不是固定值，它的值会随着父字体大小而变化。
字体大小em与rem的区别
null-hands的博客
11-16 322
1.px: 像素，css样式基本单位 2.em: 父元素字体大小整数倍；如父元素未设置字体大小，会查找更上一级父元素的字体大小。 3.rem：html页面字体大小整数倍。 <div style="font-size:10px"> <div style="font-size:2em">em为父元素字体大小整数倍: 2 * 10 = 20px</div> </div> <div style="font-size:2rem">r
设计稿尺寸设计rem换算，调整根目录fontSize。根据根节点的的fontSize，换算指定父元素的fontSize，在父元素下的子元素使用em并实现1em = 10px；vw em rem互相换算
Sunny_lxm的博客
03-13 767
设计稿尺寸设计rem换算，调整根目录fontSize。根据根节点的的fontSize，换算指定父元素的fontSize，在父元素下的子元素使用em并实现1em = 10px；vw em rem互相换算
html 字体大小em,px，em，rem该选择哪个？css相对字体大小的详细介绍
weixin_39560604的博客
06-07 597
网页设计中最大的混淆之一是由font-size属性引起的。最常用的字体大小是像素(px)，em和rem。首先，我们将重点关注字体大小属性。在CSS中，可以使用多个单元(例如像素，em和rem)，这通常会导致设计人员额外头痛。在本文中，我们将详细介绍这些单位的用法和任何误解。PX单位最常见和最受欢迎的单位是像素(px)。大多数人开始使用像素(px)单元，因为它使您可以完全控制文本大小。如果未指定字体...
css 尺寸单位（px，%，em，rem，vh，vw）的区别及应用场景
liora6的博客
06-17 3835
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸特点：   1. em的值并不是固定的   2. em会继承父级元素的字体大小场景使用：为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；vh：表示视口的高度，1vh就表示当前视口高度的百分之一；vmin：表示在vw与vh
CSS font-size 设置三号字体大小
01-11
font-size: 20px; } ``` 这种方法简单直观，适用于大多数情况下的精确控制[^1]。 #### 方法二：利用相对单位 em 进行设定 如果希望基于父级元素的文字大小来定义子元素文字的比例关系，则可以选择这种方式： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值