前端开发中的em

最新推荐文章于 2023-08-17 02:07:31 发布
最新推荐文章于 2023-08-17 02:07:31 发布
阅读量520 收藏
点赞数 2
分类专栏： 前端学习 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44628177/article/details/118764475
版权

1.定义

em是父元素字体大小

2.使用

当要使用em，如果父元素字体大小为12px
这时候如果设置子元素盒子宽度为10em，那么宽度就为120px

爱前端的小张
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端响应式网站开发模板
07-07
本项目是通过rem em 百分比 media 进行原生轻量响应式网站开发，上手非常简单，也可以当做二次开发的模板，兼容处理到ie8及其以上。
前端常用单位：em和rem简单介绍
qq_34838046的博客
09-12 3308
em（容易出错） 相对于父级元素的font-size计算而来 本级元素字体大小（单位为px）=父级元素的字体大小（转化为px） * 本级元素em的值 例如： 父级元素：20px， 子级元素的1em相当于20px 若父级元素的单位也是em，则一层层往上找，直到找到单位为px的元素。 例如： 父级元素的font-size为0.8em，父级元素的上一级元素的font-size为20px 则父级元素的font-size为0.8*20=16px。 则子级元素的1em相当于16px 因为这个特性，多级嵌套的元素若是
超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程 移动开发基础视频教程
08-20
01大前端开发和全栈开发的定义.avi 02前端开发基础视频-视频内容介绍.avi 03前端开发基础视频-操作系统常用设置.avi 04前端开发基础视频-操作系统通用快捷键操作（1)win快捷键使用.avi 05前端开发基础视频-操作系统通用快捷键操作（2）编辑快捷键.avi 06前端开发基础视频-sublime3安装和插件(1).avi 06前端开发基础视频-sublime3安装和插件(2).avi 07前端开发基础视频-sublime3常用快捷键（基础）.avi 08前端开发基础视频-atome安装和使用简介.avi 09前端开发基础视频-webstorm的使用和三个开发工具的选择.avi 06前端开发基础视频-sublime3安装和包管理器安装.avi 07前端开发基础视频-sublime3包管理器安装.avi 11前端开发基础视频-什么是浏览器什么是服务器端.avi 12前端开发基础视频-浏览器与服务器端补充.avi 13前端开发基础视频-HTML协议发展的历程（可以略过，非重点，了解即可）.avi 14前端开发基础视频-常见前端的名词解释.avi 15前端开发基础视频-网页的组成html+css+JavaScript.avi 16前端开发基础视频-HTML的页面结构.avi 17前端开发基础视频-HTML的语法.avi 18前端开发基础视频-HTML的文档声明标签.avi 19前端开发基础视频-HTML的文档标签.avi 20前端开发基础视频-head标签和页面编码title标签使用.avi 21前端开发基础视频-页面编码补充1.avi 21前端开发基础视频-页面编码补充2.avi 21端开发基础视频-页面编码补充.avi 22前端开发基础视频-link标签的常见用法.avi 23前端开发基础视频-URL协议.avi 23前端开发基础视频-h1h6标题标签与seo.avi 24前端开发基础视频-段落p标签.avi 25前端开发基础视频-hr标签br标签空格换行合并.avi 26前端开发基础视频-span标签和em标签语义化.avi 27前端开发基础视频-em标签和strong标签区别sub标签-sup标签-del标签的使用.avi 28前端开发基础视频-关于超级链接的使用.avi 24前端开发基础视频-URL编码urlencode.avi 25前端开发基础视频-相对路径和绝对路径.avi 26前端开发基础视频-图片标签img的使用和title的seo优化.avi 27前端开发基础视频-网站图片的类型及如何选择.avi 28前端开发基础视频-有序列表和无序列表.avi 29前端开发基础视频-有序列表和无序列表的补充.avi 30前端开发基础视频-自定义列表.avi 31前端开发基础视频-表格标签的使用.avi 32前端开发基础视频-单元格的合并.avi 33前端开发基础视频-div和span标签的应用.avi 34前端开发基础视频-表单标签form-input-select-textarea.avi 35前端开发基础视频-QQ注册案例.avi 36前端开发基础视频-表单分组标签.avi 37前端开发基础视频-表单标签总结.avi 38前端开发基础视频-内联框架标签iframe使用.avi 39前端开发基础视频-其他标签补充.avi 40前端开发基础视频-字符实体HTML特殊符号处理.avi 41前端开发基础视频-HTML语义化.avi 42前端开发基础视频-HTML标签的显示模式.avi 43前端开发基础视频-HTML部分总结.avi 44前端开发基础视频-CSS定义与HTML结构之间的关系.avi 45前端开发基础视频-行内样式和浏览器默认样式.avi 46前端开发基础视频-引用外部CSS文件和嵌入CSS样式.avi 47前端开发基础视频-import导入CSS样式详解.avi 48前端开发基础视频-CSS语法及简单CSS属性.avi 49前端开发基础视频-CSS语法案例.avi 50前端开发基础视频-CSS注释.avi 51前端开发基础视频-标签选择器和通配符选择器.avi 52前端开发基础视频-ID选择器.avi 53前端开发基础视频-HTML标签的ID命名规范.avi 54前端开发基础视频-类选择器.avi 55前端开发基础视频-多个类属性、id和class选择器的区别.avi 56前端开发基础视频-类选择器id选择器综合案例.avi 57前端开发基础视频-复合选择器之标签指定式选择器.avi 58前端开发基础视频-复合选择器之后代选择器.avi 59前端开发基础视频-复合选择器之并集选择器.avi 60前端开发基础视频-复合选择器之子元素选择器.avi 61前端开发基础视频-属性选择器.avi 62前端开发基础视频-CSS伪类的使用案例.avi 63前端开发基础视频-CSS伪元素.avi 64前端开发基础视频-CSS层叠性.avi 65前端开发基础视频-CSS继承性.avi 66前端开发基础视频-CSS特殊性即CSS优先级（上）.avi 67前端开发基础视频-CSS特殊性即CSS优先级（中）.avi 68前端开发基础视频-CSS特殊性即CSS优先级（下）.avi 69前端开发基础视频-CSS设置标签模式display属性介绍.avi 70前端开发基础视频-CSS设置标签模式display设置none隐藏标签.avi 71前端开发基础视频-CSS设置标签模式display行内块元素及块级行内的区别总结.avi 72前端开发基础视频-CSS颜色表示方法.avi 73前端开发基础视频-CSS长度单位表示.avi 74前端开发基础视频-关于像素的补充-CSS设置字体大小.avi 75前端开发基础视频-font-family设置字体类型.avi 76前端开发基础视频-font-family设置字体系列.avi 77前端开发基础视频-font-weight设置字体的粗细.avi 78前端开发基础视频-font-style设置字体的样式.avi 79前端开发基础视频-font字体所有属性合写.avi 80前端开发基础视频-设置字符的间距和文字的间距.avi 81前端开发基础视频-按钮综合案例.avi 82前端开发基础视频-彻底搞懂行高.avi 83前端开发基础视频-行高的练习.avi 84前端开发基础视频-文本的装饰线的控制.avi 85前端开发基础视频-text-indent设置首行缩进.avi 86前端开发基础视频-white-space设置文本不换行控制.avi 87前端开发基础视频-设置单词自动换行的处理.avi 88前端开发基础视频-体育新闻综合案例.avi 89前端开发基础视频-CSS盒模型的综述.avi 90前端开发基础视频-CSS盒模的总结.avi 91前端开发基础视频-CSS盒模的边框border设置详解.avi 92前端开发基础视频-CSS边框的妙用案例.avi 93前端开发基础视频-CSS内边距Padding的使用.avi 94前端开发基础视频-CSS内边距补充.avi 95前端开发基础视频-CSS外边距margin的详解.avi
博客前端：Fonrtend em NextJS
02-23
这是一个用引导的项目。 入门 首先，运行开发服务器： npm run dev # or yarn dev 使用浏览器打开以查看结果。 您可以通过修改pages/index.js来开始编辑页面。 当您编辑文件时，页面会自动更新。 可以在上访问。 可以在pages/api/hello.js编辑此端点。 pages/api目录映射到/api/* 。 此目录中的文件被视为而不是React页面。 了解更多 要了解有关Next.js的更多信息，请查看以下资源： -了解Next.js功能和API。 交互式Next.js教程。 您可以查看-欢迎您提供反馈和意见！ 在Vercel上部署 部署Next.js应用程序的最简单方法是使用Next.js创建者提供的。 查看我们的以了解更多详细信息。
jsp使用rem页面内容不能根据屏幕分辨率自适应_前端基础：如何更好的使用em、rem...
weixin_30005929的博客
12-03 466
em和rem都是前端开发中表示长度的单位，特别是在移动端的开发中应用最广，可能很多前端新手对这两个单位平时虽然在用，但可能不太理解，这篇文章也许正好可以帮助你更好的理解。em，rem怎么用rem是实现自适应布局的常用方法。rem以根元素字体大小为基准，em以父元素字体大小为基准对rem而言，的字体大小为14px，1rem就等于14px，2rem就等于28px。对em而言，父元素的字体大小为14px...
【前端基础知识】px、em和rem的使用和区别
Dai的博客
12-24 2197
【前端基础知识】px、em和rem的使用和区别
js rem 转px_前端基础：如何更好的使用em、rem
weixin_39923572的博客
01-20 405
em和rem都是前端开发中表示长度的单位，特别是在移动端的开发中应用最广，可能很多前端新手对这两个单位平时虽然在用，但可能不太理解，这篇文章也许正好可以帮助你更好的理解。em，rem怎么用rem是实现自适应布局的常用方法。rem以根元素字体大小为基准，em以父元素字体大小为基准对rem而言，的字体大小为14px，1rem就等于14px，2rem就等于28px。对em而言，父元素的字体大小为14px...
前端中几个单位（em、rem、vh、vw）的区别
qq_30351747的博客
08-10 3337
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是说 hei
详解web前端长度单位（px、em、rem、%、vw/vh、vmin/vmax、vm、calc()）
我都博客
08-17 6127
在前端开发中，会遇到各种不同类型的长度单位，比如px,em,rem等。 而整体的长度单位分为两大类： 绝对长度单位包括：in,cm, mm, q, pt, pc, px 相对长度单位包括：em, rem, %, vw, vh, vmax, vmin, vm, ch, ex
web前端常用长度单位（px，em，rem，pt）
我是一只蘑菇17的博客
11-25 3162
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.5em, 1em,2em等，通常1em=16px，为了简化font -size的换算，可以在css中的...
修复网络：前端em React js
02-22
在开发模式下运行应用程序。 打开在浏览器中查看它。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 ...
前端设计：让字体大小自由缩放
Devin
07-15 6459
方法一：仅使用 em     浏览器默认的字体高度是16px，在未经调整的浏览器里 1em = 16px，也就是说1px = 0.0625em 。所以10px = 0.625em ,12px = 0.75em 。依次类推，可以将px的值直接转化成em。       方法二：使用 % 加 em     1）首先在body在将字体大小设为 62.5%（16px * 62.5%
web前端开发之rem布局
Web_chicken的博客
01-14 5497
1.rem布局 1.1 em和rem rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em: em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN em可以让页面更灵活，比起写死的px值，em更有张力，改动父元素的字体大小，子元素会等比例变化，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值 em做弹性布局的缺点还在于牵
如何更愉快地使用em —— 别说你懂CSS相对单位
weixin_33724570的博客
07-08 140
前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若有勘误或翻译建议，欢迎 Github PR ^_^） 《别说你懂CSS相对单位》系列译文： 如何更...
前端开发常用单位
Cao_Mary的博客
09-12 579
1.像素 什么是像素(Pixel)? 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素 例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格 像素特点 不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位) 2.百分比 什么是百分比? 百分比是前端开发中的一个动态单位, 永远都是以当前元素...
前端页面常用的长度单位：px、vw、vh、em、rem
weixin_45096939的博客
09-05 1096
相对于视口的宽度和高度，1vw 等于视口宽度的1%，总视口宽度为100vw；1vh 等于视口高度的1%，总视口高度为100vh。em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。em和rem具有灵活性，是相对长度单位，适用于响应式布局。vw和vh是视口(可视窗口)单位，是相对长度单位。
我的前端学习笔记 关于em和rem的使用
树海的专栏
08-02 2919
因为在公司以后都是移动端前端开发，传统的用px作为单位显然不切实际。因此我们要使用相对单位em和rem。 这两个其实没什么本质区别，只是相对的不一样。em 是以父元素的字体大小为参照。比如父元素是12px，你给子元素1em,他其实就是12px长。 下面举例说明：这是html的结构         a a2         b c赋给他们不同的em值，他
前端界面开发大小单位 px rem em的思考记录
weixin_30606461的博客
06-30 295
前端界面开发表示大小的单位有 px、rem、em。这三种有什么区别呢？px指像素值，固定大小，较好理解。rem、em的区别呢？em是针对body中的font-size的倍数，rem是针对html的倍数。 1、emem是针对body中font-size的倍数，font-size默认是24px例：body{font-size:62.5%;}则：1em=10px2、remrem是针对html的倍数ht...
前端开发需要什么证书
最新发布
08-18
前端开发工作通常不要求特定的证书。前端开发主要侧重于技能和经验的积累，通过实际项目和作品来展示自己的能力。然而，有一些与前端开发相关的证书可以增强求职者的竞争力。例如，W3School的HTML和CSS证书以及...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值