css篇-面试题7-说一说rem与em的区别并如何做移动端适配

最新推荐文章于 2024-06-23 14:47:41 发布
最新推荐文章于 2024-06-23 14:47:41 发布
阅读量1k 收藏 1
点赞数
文章标签： css html html5 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzc_coder/article/details/108675610
版权
本文介绍了CSS中的rem与em单位的区别。rem是相对于根元素html的字体大小，而em是相对于父元素的字体大小。在移动端适配中，使用rem能简化动态适配过程。文章还探讨了如何以750px为标准将px转化为rem进行移动端布局，并提及不同公司的适配方案和事件循环、数组排序等JS相关面试知识点。
摘要由CSDN通过智能技术生成

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

说一下rem 与 em 有什么区别

rem 是基于 html 元素的字体大小来决定，而 em 则根据使用它的元素的大小决定,一般被称为相对长度单位,是根据它父元素的字体大小来计算的，一般默认情况下：16px = 1em

如果父元素font-size:16px,子元素margin:0.8em。那么得到的大小就是:0.8 * 16 =12.8。

当所有单位都采用em时，我们只需要改变body的font-size，那么其他子元素宽度就能动态变化了，显然方便很多

em 和 rem 单位之间的区别是浏览器根据谁来转化成 px 值

rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。

rem出现就可以解决这样

最低0.47元/天 解锁文章
itclanCoder
关注
css中em和rem的区别
xxxx_1104的博客
03-01 4209
一：区别 （1）em：em是一种相对长度单位，相对于自身元素的字号大小，如果没有设置就参照父容器的字号大小或浏览器默认字号大小。 举例：给父容器设置font-size:16px ，在给父容器设置宽度为10em，最后在浏览器中呈现出来的效果如下，换算为像素就是160px <!DOCTYPE html> <html lang="en"> <head> &l...
rem和em的区别之面试题解析
玛已的小空间
05-31 311
rem和em的区别之面试题解析
rem和em的区别 ！前端面试题
业余前端的职业经历
03-14 2259
可能有很多新手小伙伴都知道rem是做手机端适配的,但却并不了解他,虽然并不影响你的使用。但如果是应对面试的话,可不仅仅就是会用就好了 我们先来看俩个例子 // 我写了俩个div <div class="rem"></div> <div class="em"></div> // 样式 一个是以 rem为单位 一个是以em为单位 .rem{ widt...
css中em和rem是什么，有什么区别？
HXR1984的博客
04-16 4367
文章目录前言一、em是什么？二、rem是什么？三、em和rem的区别 前言 在我们学习css的时候会遇到三种常见的长度单位：px、em、rem。px是像素，相信大家并不陌生，那em和rem又是什么，如何来区别呢？以下内容仅供参考，不作为专业讲解。 一、em是什么？ em是相对长度单位，其值并不固定，一般会继承父级元素的字体大小。任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合： 1em=16px。但如果父级设置了其他字体高度，那此时的1em就等于父级设置好的字体高度。 二、rem是什么？
CSS中 em和rem的区别
xiaojiandan000的博客
06-17 553
CSS 单位em和rem的区别 展开 在css中单位长度用的最多的是px、em、rem，这三个的区别是： px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。 rem中的r意思是root（根源），这也就不难理解了。 em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用e
最全前端面试题-2（css篇-上百篇题集整理1个月）
05-04
【CSS1. CSS3 特性】：CSS3引入了许多新特性，如边框圆角（border-radius）、阴影效果（box-...以上是对CSS面试题中涉及知识点的详细解释，涵盖了从基础到进阶的各种概念和技术，有助于全面理解和掌握CSS相关知识。
2023前端HTML+CSS最全面试题和答案汇总
02-09
题目举例：1、 rem em vw vw 百分比区别 2、 移动端如何适配 3、场景题（两个盒子，左边固定宽，右边自适 应，你能想到几种方法） 4、css 选择器有哪些，权重是什么样的 5、CSS3动画知道吗，实现过哪些css3动画 6...
Js篇-面试题11-比较下for..of与for..in的区别
itclanCoder
09-20 557
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知...
2024 前端高频面试题之 HTML/CSS 篇
Aybuai的博客
01-18 2285
使用float布局两侧使用 margin 负值，以便和中间内容横向重叠防止中间内容被两侧覆盖，一个用padding为两侧留白 一个用margin为两侧留白。
css中的rem跟em的区别
yuzheh521的博客
07-02 235
em是相对于父元素的字体大小来说：页面效果 rem是相对于html元素的字体大小来说：
html中em和rem,css3中rem与em之间有什么区别？
weixin_36230541的博客
06-17 354
在css中单位长度用的最多的是px、em、rem。那么其中em、rem的区别是什么？下面本篇文章就来给大家介绍一下em、rem的区别，希望对大家有所帮助。emem是相对长度单位。其相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。em的特点是：em的值不是固定的。em会继承父级元素的字体大小在这里有一个em使用的小技巧：任意浏览器的默认字体高都...
【CSS】CSS 的 rem 和 em 的区别
最新发布
读心悦
06-23 476
在 CSS 中，rem和em是两种相对单位，用于根据元素的字体大小设置尺寸。尽管它们都是相对的，但它们的参考点是不同的。
css中单位em和rem之间的区别
qq_39364586的博客
06-28 434
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。 在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 em是自适应当前使用字体大小的，1em等于当前字体大小，2em等于两倍字体大小（font-size） 1.子元素字体大小的em是相对于父元素字体大小 2.元素的width/height/padding/margin用em的话是相对于该元素的font...
CSS 中 px，em和rem 的区别 学习笔记
根是地下的枝
07-26 1479
简单讲，px是绝对单位，em和rem是相对单位。px大家都熟悉，这里主要讨论em和rem。现在有以下一个段落：<p>当斧头来到树林的时候，好多树都说，至少<span>它的手柄</span>是自己人</p>当不给它设置字体大小时，使用默认大小，也就是16px大小，效果如下：emem是指相对于父元素的大小，也就是说对于p和span而言，它的大小都是1em，这里的1em = 16px。我们将span的大小
前端学习（1827）：前端面试题之实现rem适配
歌谣的博客
08-01 714
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> *{ .
css中rem em vh px各自代表的含义
m0_56344602的博客
07-14 764
css中rem em vh px各自代表的含义 rem rem是css3新增的一个相对单位，rem是相对于HTML根元素的字体大小来进行计算 如果没有设置HTML的字体大小，就会以浏览器默认字体大小，一般是16px。 rem除了IE8及更早版本以外，所有浏览器均支持 em em子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-size。 如果父元素的字体尺寸未设置，则相对于浏览器默认字体大小 vw/vh vw/vh
（4）：rem与em
weixin_46511008的博客
09-26 147
原文：综合指南: 何时使用 Em 与 Rem 一、rem与em 1、em 和 rem 都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem，它可以被浏览器翻译成 从 16px 到 160px 或其他任意值。 2、rem 是基于 html元素 的字体大小来决定，而 em 则根据 使用它的元素 的大小决定（很多人错误以为是根据父类元素，实际上是使用它的元素继承了父类的属性才会产生的错觉） 1、rem 和 em 单位是由浏览器基于你的设计中的
em和rem区别
xiaoninvhuang的博客
04-24 984
em 单位em是相对于父元素的，如果父元素没有设置字体大小，那就会追溯到body（是body，不是html）。 lem就等于父元素字体的大小（如果父元素设置了字体大小）。 注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。 rem  在说rem,因为他是相对于跟元素（html）,所以如果用rem，body里面写任
vue-cli3结合vant与postcss-px2rem的移动端开发实战
"本文档详述了如何使用vue-cli3、 vant UI组件库以及postcss-px2rem来构建和适配移动端页面的过程。" 在移动端应用开发中，选择合适的框架和技术栈至关重要。本示例选择了`vue-cli3`作为项目脚手架，它提供了快速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值