rem中的坑

最新推荐文章于 2025-07-05 11:23:59 发布
原创 最新推荐文章于 2025-07-05 11:23:59 发布 · 606 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这里有一篇专门介绍rem的
http://www.w3cplus.com/css3/define-font-size-with-css3-rem
要注意的是rem是相对于html的font-size,但是当你的浏览器最小PX是12PX，而你html是62.5%就是10px，
rem不会相对10px，而是12px，一般用谷歌调试，所以还是设置75%的好
rem的坑
qq_21383977的博客
09-19 501
因为meta少了这句话，所以出现了不能使用rem正常显示字体大小，出现很多怪异的现象 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />...
rem项目踩到的坑
qq_45043019的博客
12-09 357
接到一个项目需要你去迭代修改，如果是rem布局，切记先点开浏览器dom树的html标签，看一下上面的font-size是多少，如果浏览器手机模拟器是375的宽 dom树上html的font-size应该是25px，那相对ui给的750的图则正好是1rem = 50px，但如果浏览器手机模拟器375宽的dom树你点开html的font-size是20px的话，那他的项目中设置的1rem对应的就是40px —记得手动设置一下vscode里的rem自动转换— 大部分项目都是配置1rem = 50px，但也
手机端rem布局踩过的坑
Schrodinge的博客
05-03 1125
手机端布局一般有：rem布局、百分比布局、媒体查询、弹性盒布局等 在公司接到的新需求：公司公众号需要接入提现接口，需要切一个提现页面。我脑子快速闪过用百分比布局。很快…效果就出来了，提现页面始终垂直居中，经过多方测试，本以为圆满完成任务了。 很开心的就上线了，然后UI小姐姐很开心的说我要做第一个使用这个提现接口的用户，刚好我账号有钱。 然而…尴尬的事情出现了，UI小姐姐的手机居然没有适配，提现框...
移动端 - - 响应式中rem的坑
玖尘的博客
03-18 855
移动端做响应式布局用rem是目前移动端开发比较流行的一种适配方式，但是这种方式在一些方面却存在着一些缺陷。那么，今天就来说说这个问题。 宽度方面来看 目前主流的宽度： 360px, 375px, 414px等，外加一个小尺寸的320px。 从内容来看，我们的内容一般为文字或图片。 文字这块我们随便挑几个宽度不同的手机查看同一个app，会发现文字大小都是一样的，不会出现iphone se的时候是14px，ip...
关于rem的计算的坑
hzxOnlineOk的博客
12-10 296
如下图所示，我们需要做一个分割线，这是一个移动端h5的页面，需要做rem适配，分割线样式如下： .split_line { display: inline-block; width: 0.02rem; height: 0.4rem; margin-right: 0.16rem; background: #ebebeb; } 宽度为0.02rem时，会出现时隐时现的情况！...
javascript用rem来做响应式开发
10-18
这里有一个需要注意的“坑”，就是浏览器对于font-size有一个最小值限制，例如在谷歌浏览器中默认最小值是10px。如果设置的font-size小于这个值，浏览器将不会继续缩小字体大小，这就限制了我们使用JavaScript动态...
【高频考点精讲】rem 与 em 的区别及其在响应式设计中的应用
全栈老李的博客
07-05 1005
🧑‍🏫：全栈老李📅：2025 年 7 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们聊一个前端开发中绕不开的话题——CSS单位rem和em的区别。这俩兄弟长得像，但性格迥异，用好了能让你的响应式设计如虎添翼，用不好...嘿嘿，等着加班调样式吧。
nuxt3中配置rem js 实现pc端自适应 postcss-pxtorem
最新发布
09-21
注意：我们的设计稿尺寸如果是1920px，那么设计稿上标注的尺寸，比如100px，在postcss-pxtorem中会转换成1rem（因为rootValue=100）。 步骤5：在样式中使用px单位，它们会被自动转换成rem。 但是，请注意：在...
【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景
全栈老李的博客
05-14 1127
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
vue项目移动端适配rem
m0_65331985的博客
10-20 613
vue项目移动端适配rem
rem的使用及踩过的坑
ShiLuoFeiYu的博客
03-08 1733
1.rem是蛤子？rem是css的一个单位。这个单位代表相对于根元素的 font-size 大小（例如 font-size <html> 元素）。当用在根元素的font-size上面时 ，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面
rem优缺点
青山不改，绿水长流。
09-24 1280
（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。))表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。（4）rem在处理小数的时候会有误差，而且对小屏幕不友好。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。（2）使用iframe引用也会出现问题。（1）在奇葩的dpr设备上(
rem适配pc的弊端
weixin_42458965的博客
08-29 3240
https://imweb.io/topic/5745adf5a94f742c1db63485
Rem布局的原理解析
SunShinessx的博客
04-16 5971
一.什么是Rem rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 从作用上可以看出,rem可以用来解决等比例缩放问题，也就是响应式问题。而em用来解决，当设置了等比缩放，字体不能很好展示，可以用em来解决字体问题。...
【移动端布局】抛弃rem，使用vw
热门推荐
04-26 1万+
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹简单介绍下rem布局方案rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-s
微信禁用右上角的分享按钮，WeixinJSBridge API以及隐藏分享的子按钮等菜单项
weixin_33755554的博客
09-14 1825
今天在做隐藏微信右上角的分享按钮 现在使用的写法是 wx.hideMenuItems({ menuList: ["menuItem:share:timeline", "menuItem:copyUrl", "menuItem:share:appMessage", "menuItem:share:qq", "menuItem:share:weiboApp",...
使用 rem 布局的优缺点？
liuhao9999的博客
03-23 3429
优点： 在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。 而且现在浏览器基本都已经支持rem了，兼容性也非常的好。 缺点： （1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。 （2）使用iframe引用也会出现问题。 （3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问 题。 ...
java微信分享config:invalid signature，自定义右上角菜单（只保留分享给好友和朋友圈）
谢彬の优快云专栏
07-09 1万+
微信提供的API位置：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 先照着文档复制： JSSDK使用步骤 步骤一：绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注：登录后可在“开发者中心”查看对应的接口
[css] 使用rem的优缺点是什么？和使用百分比有什么区别？
歌谣的博客
02-06 1461
[css] 使用rem的优缺点是什么？和使用百分比有什么区别？ rem在处理小数的时候会有误差，百分比要按照父级的尺寸去计算，不灵活 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
rem布局
03-22
<think>好的，用户想了解REM布局的相关知识和实现方法。首先，我需要整理REM布局的基本概念，解释为什么它用于移动端适配。根据引用[3]，REM是相对单位，基于根元素的字体大小，这个点很重要，需要详细说明。 接下来，用户可能需要具体的实现步骤。引用[4]和[5]提到了使用postcss-pxtorem插件和lib-flexible的方案，应该分步骤介绍，比如安装配置、设置根字体大小等。要注意版本问题，比如postcss-pxtorem的版本兼容性，引用[5]指出需要特定版本，这点要提醒用户。 然后，可能要考虑不同框架下的实现，比如Vue项目中的使用，这也是用户可能遇到的场景。需要给出示例代码，并说明如何引入lib-flexible和配置postcss。 另外，响应式调整部分，引用[4]中的resize事件监听是关键，要说明如何动态调整字体大小。同时，设计稿转换的示例，比如750px设计稿对应37.5的根字体，帮助用户理解换算方法。 最后，常见问题部分需要包括版本冲突、设计稿比例、媒体查询的使用等，这些都是用户实际使用中可能遇到的坑。比如引用[5]提到的版本问题，必须强调解决方法。 总结一下，结构应该是先讲原理，再讲具体步骤，然后示例，最后注意事项和问题解答。确保引用相关的参考资料，并在适当位置标注引用标记，如[^3]、[^4]等，保持回答的权威性。</think>### REM布局实现方法详解 REM（Root EM）布局是一种基于相对单位的响应式布局方案，核心原理是通过动态调整根元素的字体大小来实现页面元素的等比缩放。以下是分步实现方法： 一、核心原理 1. REM单位特性：$1rem = 根元素(html)的font-size$值[^3] 2. 布局公式：$元素尺寸(px) = rem值 × 根字体大小(px)$ 3. 适配规则：根据屏幕宽度动态计算根字体大小 二、标准实现步骤 1. **设置基准值** ```css html { font-size: 37.5px; /* 对应750px设计稿（750/20=37.5）*/ } ``` 2. **动态计算脚本**（推荐使用lib-flexible） ```javascript // 基于375px设计稿的适配方案 (function() { const baseSize = 37.5 function setRem() { const scale = document.documentElement.clientWidth / 375 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } setRem() window.onresize = setRem })() ``` 3. **单位转换配置**（使用postcss-pxtorem） ```javascript // postcss.config.js module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], selectorBlackList: ['.norem'] } } } ``` [^5] 三、Vue项目实践示例 1. 安装依赖 ```bash npm install lib-flexible postcss-pxtorem@5.1.1 -S ``` 2. 在main.js引入 ```javascript import 'lib-flexible/flexible' ``` 3. 设计稿转换示例 ```css /* 原设计稿尺寸：200px × 100px */ .box { width: 5.3333rem; /* 200/37.5=5.3333 */ height: 2.6667rem; /* 100/37.5=2.6667 */ } ``` 四、响应式调整策略 1. 设置最大缩放比例（防止过大屏幕失真） ```javascript Math.min(scale, 2) /* 最大支持2倍缩放 */ ``` 2. 媒体查询补充方案 ```css @media screen and (min-width: 768px) { html { font-size: 75px !important; } } ``` 五、常见问题解决方案 1. **版本冲突**：PostCSS 8+需要降级插件版本[^5] ```bash npm uninstall postcss-pxtorem npm i postcss-pxtorem@5.1.1 ``` 2. **设计稿比例**： - 750px设计稿 → rootValue: 75 - 375px设计稿 → rootValue: 37.5 3. **第三方UI适配**： ```javascript selectorBlackList: ['van-'] /* 过滤VantUI组件 */ ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值