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

最新推荐文章于 2024-04-13 21:21:47 发布
最新推荐文章于 2024-04-13 21:21:47 发布
阅读量1k 收藏 1
点赞数
文章标签： css html html5 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzc_coder/article/details/108675610
版权

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

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

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

点击左上方,可关注本刊

标星公众号（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出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。有了rem这个单位，我们只需要调整根元素html的font-

最低0.47元/天 解锁文章
itclanCoder
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于vue利用postcss-pxtorem进行移动端适配的问题
10-15
主要介绍了关于vue利用postcss-pxtorem进行移动端适配的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端学习（1827）：前端面试题之实现rem适配
歌谣的博客
08-01 703
<!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"> *{ .
em和rem的区别
SiReSo的博客
03-14 2万+
1. em 是一个相对单位。相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px 特点： em的值并不是固定的 em会继承父元素的字体大小 2. rem 是一个相对单位。是相对HTML根元素。 特点： rem为元素设定字体大小的时候，是相对于根元素进行计算的。 当我们改变根元素下的字体大小时，下面的大小都会改变。 ...
rem适配两种方案——实战篇
最新发布
爱游戏爱学习的博客
04-13 1768
用屏幕总宽度/划分等份数=html字体大小1rem=html字体大小页面元素rem计算公式：页面元素的px / html字体大小。
rem和em的区别 ！前端面试题
业余前端的职业经历
03-14 2234
可能有很多新手小伙伴都知道rem是做手机端适配的,但却并不了解他,虽然并不影响你的使用。但如果是应对面试的话,可不仅仅就是会用就好了 我们先来看俩个例子 // 我写了俩个div <div class="rem"></div> <div class="em"></div> // 样式 一个是以 rem为单位 一个是以em为单位 .rem{ widt...
rem和em的区别之面试题解析
玛已的小空间
05-31 250
rem和em的区别之面试题解析
postcss-pxtorem移动端适配的实现
01-19
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下，文件内容如下 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
总的来说，移动端适配的关键在于理解不同设备的屏幕差异，并选择合适的工具进行像素单位转换，确保设计在各种屏幕尺寸下都能得到良好的展示。在Vue CLI3的环境中，`lib-flexible`和`px2rem`系列插件提供了方便快捷的...
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
前端常见面试题：px,em,rem的区别
lucky_girl_girl的博客
02-07 5289
一.px 1.相对长度单位。相对于显示器屏幕分辨率而言。 2.存在浏览器不兼容问题。 二.em 1.相对长度单位。相对于当前对象内文本字体尺寸。 2.em值并不是固定的，em会继承父级元素的大小. 3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px. 4.存在容易造成字体设置混乱...
H5端自适应框架adaptive.zip
07-19
H5端自适应框架 使用方法： [removed][removed]  [removed]  window['adaptive'].desinWidth = 640;// 设计图宽度  window['adaptive'].baseFont = 18;// 没有缩放时的字体大小  window['adaptive'].init();// 调用初始化方法  [removed] 然后在css中设置相应样式即可： .main-info { height: 0.88rem; padding-bottom: 0.24rem; } .fund-info { position: relative; font-weight: normal; padding: 0.2rem 0; padding-right: 1.7rem; padding-left: 0.23rem; font-size: 0.32rem; line-height: 1; } adaptivejs原理： 利用rem布局，根据公式   html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度   设置html元素的font-size,然后根据设计图大小/100即为css大小。   比如一个div设计图宽度为89px,那么在css中我们可以这样书写：width:0.89rem;   如果是文字，我们也建议使用rem。   对于iphone的retina高清显示屏，我们做了缩放处理，以达到最佳显示效果。 注意：如果设计图宽度大于document的宽度，0.01rem将小于1px,故如果设计图是1px,在css中仍然用1px显示。 可用的全局变量：window.devicePixelRatioValue 当前页面设置的设备像素比 标签：adaptive
移动端响应式布局解决方案JavaScriptREM
08-10
移动端响应式布局解决方案、用 JavaScript 根据屏幕宽度计算 Root 字体大小弥补媒体查询断点断层过大问题，元素单位使用 REM 即可基于 Root 字体大小来改变自身大小。
em和rem区别
xiaoninvhuang的博客
04-24 969
em 单位em是相对于父元素的，如果父元素没有设置字体大小，那就会追溯到body（是body，不是html）。 lem就等于父元素字体的大小（如果父元素设置了字体大小）。 注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。 rem  在说rem,因为他是相对于跟元素（html）,所以如果用rem，body里面写任
rem 和 em 的区别
yf18040578780的博客
04-28 3927
em和em都是相对单位，主要参考的标签不同：
rem和em的区别
热门推荐
前进者
07-01 2万+
文章里面的代码可以直接复制，运行！
移动端web自适应解决方案： adaptive.js
weixin_30528371的博客
07-06 187
代码有更新，最好直接查看github github:https://github.com/finance-sh/adaptive adaptivejs利用rem解决移动端页面开发的自适应问题 页面模板初始化的时候不用设置viewport标签，由js生成。 我们在head标签的顶部引入js，按以下方法使用即可 使用方法： 在页面head写入以下代码，实时更新html的fontsi...
em与rem的区别
qq_42459832的博客
11-20 3033
在css中px、em、rem，这三个的区别是： px是固定像素，一旦设置了就无法因为适应页面而改变。 em是rem相对于px更具有灵活性，他们是相对于长度单位的变化而变化，更适应于响应式布局。 em相对于父元素 rem相对于根元素 em的具体解析： 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话相对于该元素的font-size。 <!DOCTYPE html> <html> <head> &
怎么用postcss-px2rem做移动端适配
05-20
PostCSS-px2rem是一个PostCSS插件，可以将CSS中的像素值转换为rem值，以实现移动端适配。 以下是使用步骤： 1. 安装`postcss-px2rem`插件 ```bash npm install postcss-px2rem --save-dev ``` 2. 在项目根目录下创建`postcss.config.js`文件 ```js module.exports = { plugins: { 'postcss-px2rem': { remUnit: 75 // 设计稿宽度/10 } } } ``` 其中，`remUnit`是设计稿宽度除以10的值，这个值可以根据实际情况进行调整。 3. 在`webpack.config.js`或`vue.config.js`中引入`postcss-loader`并加入配置 ```js module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { config: './postcss.config.js' } } } ] } ] } } ``` 4. 在CSS中使用像素值 ```css .container { width: 750px; /* 设计稿宽度 */ font-size: 28px; /* 除了长度单位外，其他样式仍然使用像素值 */ } ``` 经过转换后，CSS将变为： ```css .container { width: 10rem; font-size: 0.37333333rem; } ``` 这样，就实现了移动端适配。当页面宽度发生变化时，rem值也会相应地进行调整，从而实现适配效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值