rem中的坑

最新推荐文章于 2025-07-05 11:23:59 发布
最新推荐文章于 2025-07-05 11:23:59 发布
阅读量585 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xdprintf/article/details/49558935
这里有一篇专门介绍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 483
因为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 334
接到一个项目需要你去迭代修改，如果是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 1105
手机端布局一般有：rem布局、百分比布局、媒体查询、弹性盒布局等 在公司接到的新需求：公司公众号需要接入提现接口，需要切一个提现页面。我脑子快速闪过用百分比布局。很快…效果就出来了，提现页面始终垂直居中，经过多方测试，本以为圆满完成任务了。 很开心的就上线了，然后UI小姐姐很开心的说我要做第一个使用这个提现接口的用户，刚好我账号有钱。 然而…尴尬的事情出现了，UI小姐姐的手机居然没有适配，提现框...
移动端 - - 响应式中rem的坑
玖尘的博客
03-18 842
移动端做响应式布局用rem是目前移动端开发比较流行的一种适配方式，但是这种方式在一些方面却存在着一些缺陷。那么，今天就来说说这个问题。 宽度方面来看 目前主流的宽度： 360px, 375px, 414px等，外加一个小尺寸的320px。 从内容来看，我们的内容一般为文字或图片。 文字这块我们随便挑几个宽度不同的手机查看同一个app，会发现文字大小都是一样的，不会出现iphone se的时候是14px，ip...
关于rem的计算的坑
hzxOnlineOk的博客
12-10 276
如下图所示，我们需要做一个分割线，这是一个移动端h5的页面，需要做rem适配，分割线样式如下： .split_line { display: inline-block; width: 0.02rem; height: 0.4rem; margin-right: 0.16rem; background: #ebebeb; } 宽度为0.02rem时，会出现时隐时现的情况！...
vue3.0使用postcss-px2rem适配移动端爬坑之路
weixin_44153357的博客
10-12 3255
这次使用了一下postcss-px2rem来适配移动端，爬了一些坑，记录一下 postcss-px2rem插件的转换，有利也有弊： 利：直接内部px换成为rem 弊：无法在控制台调试，并且会转换第三方的UI 这次使用了iview4.0测试了一下，最后放弃了postcss-px2rem，改用postcss-px2rem-exclude 总的使用过程就是 npm ipostcss-px2...
javascript用rem来做响应式开发
10-18
这里有一个需要注意的“坑”，就是浏览器对于font-size有一个最小值限制，例如在谷歌浏览器中默认最小值是10px。如果设置的font-size小于这个值，浏览器将不会继续缩小字体大小，这就限制了我们使用JavaScript动态...
【高频考点精讲】rem 与 em 的区别及其在响应式设计中的应用
最新发布
全栈老李的博客
07-05 866
🧑‍🏫：全栈老李📅：2025 年 7 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们聊一个前端开发中绕不开的话题——CSS单位rem和em的区别。这俩兄弟长得像，但性格迥异，用好了能让你的响应式设计如虎添翼，用不好...嘿嘿，等着加班调样式吧。
使用px2rem不生效
全网同名：PBitW！ 可以去掘金关注我！
07-22 4020
webpack配置 正确的配置，兼容现在的vuecli 下载的包 使用问题 1、不兼容 scss 解决办法 2、大写、style里面不会被解析 3、prettier 保持大写 lib-flexible 1、兼容pad 2、配合媒体查询 --》 避免 pc 端字太大
【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景
全栈老李的博客
05-14 1018
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
rem的使用及踩过的坑
ShiLuoFeiYu的博客
03-08 1717
1.rem是蛤子？rem是css的一个单位。这个单位代表相对于根元素的 font-size 大小（例如 font-size <html> 元素）。当用在根元素的font-size上面时 ，它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面
rem优缺点
青山不改，绿水长流。
09-24 1211
（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。))表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。（4）rem在处理小数的时候会有误差，而且对小屏幕不友好。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。（2）使用iframe引用也会出现问题。（1）在奇葩的dpr设备上(
rem适配pc的弊端
weixin_42458965的博客
08-29 3205
https://imweb.io/topic/5745adf5a94f742c1db63485
Rem布局的原理解析
SunShinessx的博客
04-16 5882
一.什么是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 1804
今天在做隐藏微信右上角的分享按钮 现在使用的写法是 wx.hideMenuItems({ menuList: ["menuItem:share:timeline", "menuItem:copyUrl", "menuItem:share:appMessage", "menuItem:share:qq", "menuItem:share:weiboApp",...
使用 rem 布局的优缺点？
liuhao9999的博客
03-23 3310
优点： 在屏幕分辨率千差万别的时代，只要将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 1373
[css] 使用rem的优缺点是什么？和使用百分比有什么区别？ rem在处理小数的时候会有误差，百分比要按照父级的尺寸去计算，不灵活 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
rem布局
03-22
最后，常见问题部分需要包括版本冲突、设计稿比例、媒体查询的使用等，这些都是用户实际使用中可能遇到的坑。比如引用[5]提到的版本问题，必须强调解决方法。 总结一下，结构应该是先讲原理，再讲具体步骤，然后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值