使用rem时chrome中的bug

最新推荐文章于 2022-02-10 17:51:43 发布
最新推荐文章于 2022-02-10 17:51:43 发布
阅读量2.4k 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012730333/article/details/51287682
版权

问题：当根节点html的字体大小设置小于12px时，chrome始终使用12px计算rem的值

原因：chrome的字体最小大小为12px，不能再小了

解决办法1：chrome 27.0版本以下可通过给html加-webkit-text-size-adjust:none;属性来解决，但是之后的版本都不支持了，新版本已经禁止了改属性

办法2：用css3的transform:scale(0.875);  （PS: 绝对是馊主意，字体和容器都跟着一起缩小了）

最终选择：向chrome妥协了，把根节点的字体改成大于12重新计算了所有的大小，谁让你的我的最爱呢，允许你有一点点小任性。


附：cssrem的工具 (有了它重新计算rem距离和大小会方便很多，表情：阴笑)



hmg_monkey
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用rem布局代码详解
12-13
1、npm i amfe-flexible 2、import ‘amfe-flexible...在vue项目中使用rem布局简易教程 rem布局由于其根据屏幕宽度的改变修改相应的rem与px的转换比例，这样非常适合移动端的项目。 在不同的分辨率下，都会有较好的显示
CSS中px em rem区别与使用
12-09
最近在学习字体时遇到字体大小的设置，font-size单位可以是px或em或rem，那么这几种单位都有什么区别呢，该如何使用呢？ px是像素图像的基本采样单位，相对于显示器屏幕分辨率而已的，什么是一个像素呢，你把一张图...
chrome 谷歌浏览器升级 rem布局问题
爱吃锅包肉
07-28 999
rem布局和浏览器字号有关系
关于CSS中 用“rem" 在谷歌浏览器下的问题
qq_21830361的博客
03-23 7016
rem是css3新定义的设置字体大小属性，常用的两种字体大小设置有下面2种： 1、 px为单位 2、em为单位(百分比用法跟em类似) PX为单位 在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较精确和固定。只要页面某元素设置了px字体大小，其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素高的话，该子元素/子孙元素会继承其父元素的
探究为何rem在chrome浏览器上计算出错
weixin_30879833的博客
05-12 315
最近在一个项目中，测试同学提了一个bug，说手机上有个页面的某些字体显示偏大。就像这样 我用chrome浏览器在pc上测试了一下，发现pc上也有这个问题，但是用其它浏览器打开这个页面就没有发现这个问题。 于是，上网百度了一下，发现原来是chrome浏览器的问题。 通过各种百度Google然后我总结了一下这个问题产生的原因： chrome浏览器目前支持的最小的字体大小为12px，而我在h...
媒体查询、px和rem转换、浏览器兼容、手机端视频播放解决方案
chidaihuashi的博客
02-07 1471
媒体查询 响应式的界面不局限于某一固定分辨率。所以如何在不同的尺寸的设备上很好地展示界面，是一个很大的问题。 为了更好的适配设备，我们按照不同的分辨率对设备进行了划分。 在这里插入代码片/* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: 1200px) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: 992px) { ... } /* 小屏幕（平板，大于等于 768px） */ @media
H5 web 端vw适配以及rem适配在chrome下的坑
Tx的博客
02-10 770
1.rem适配 今天用qq浏览器打开项目，人傻掉了，界面全部乱了，因为我用的是rem的适配方法，就开始找问题，发现在设置少于12px的时候，会有偏大的现象，这点在Chrome上不太明显，但在运用chrome内核的qq浏览器上非常明显 一个div宽高同样都是10rem 这是在qq浏览器的值：这是在火狐的值： 我的1rem小于12，可以看到了宽高明显在chrome下偏大了 多加了0.2倍。普通情况下把rem调整到12以上，这样可以解决问题 介于我运用了一些行内样式，改rem的大小非常麻烦 于是选用了vw适配方
chrome中使用rem做单位，宽高计算数值不可用
lamanchas的博客
11-19 2520
下面三图为chrome的计算结果： 代码设置：html{font-size:62.5%;} 可以发现同样为1.6rem，字体大小正常计算得到16px，而padding-right不是16px. 搜索得到的解答：原因是chrome的最小计算单位是12px;当小于12px时，会被当作12px进行计算。 示例1 html{ font-size:10px;}
rem Chrome bug：rem单位的字号在Chrome浏览器中过大
kaikai4的专栏
01-11 2060
http://www.w3cfuns.com/notes/14585/c8028cdf6726f49a8cacc87f533e97f6
移动端rem布局加载瞬间的尺寸有bug 由大变小 或者有小变大，怎么解决?
weixin_42137023的博客
10-21 2290
  我是这样解决的    1  body 或者html 加个visibility：hidden;  或者用opacity：0； <body style="visibility: hidden;"></body> 2 使用rem  加载完成后的函数调用 body属性的visbility：visible; (function(doc, win) {     var ...
vue使用rem实现 移动端屏幕适配
12-01
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了 如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：...
了解和使用CSS中的rem单位
01-08
在font-size根元素的属性上指定时，rem单位是指属性的初始值。 这意味着1rem等于该html元素的字体大小（对于大多数浏览器而言，其默认值为16px）。 新建一个前端学习qun438905713，在群里大多数都是零基础学习者，...
ie11和edge浏览器下REM的bug
fly_home_ysc的博客
08-15 5766
最近在做项目的时候，为了进行响应式的操作，采用了现在出现的一个新的单位——REM，在主流的浏览器都是没什么问题的。但是在ie出现了灵异的bug。bug表述：加载页面的时候，页面的所有元素没有按照对应获取的js来计算出来的rem值来进行显示。但是在鼠标悬浮在对应的元素时会自己动按照对应的计算值来显示，从而就会出现闪烁的bug。由于上述代码还带有 resize 函数，假如 body 元素没有添加 fon
为何rem在chrome浏览器上计算出错
qq_29377109的博客
07-13 1303
chrome浏览器目前支持的最小的字体大小为12px，而我在html根元素上设置font-size:62.5%，计算之后就是10px，1rem=10px。 由于我页面字体大小都是按照10px的基数去算的，所以当chrome浏览器计算字体大小时就出现了出错          所以，目前我认为最根本的解决方法就是，将html根元素的font-size大小设置为大于等于12px。
rem在ff和chrome下表现不一致
suncg110的专栏
03-15 1183
rem只能控制字体大小吗，在ff和chrome表现不一。目前中文版chrome浏览器的默认字体大小下限是12像素，把html根元素设置为62.5%时，rem单位的取值依然是以75%（12像素）计算的。REM单位用在文本大小上也的确没有什么问题。但用在排版、间距、宽高设定上，chrome依然会受“字体最小下限”影响，比如行高，宽度等等。 rem控制字体大小都兼容，控制其他可能不兼容，会受字体最小下
[转载]兼容性--rem兼容适配解决方案
Datura_Elena的博客
10-29 2030
转载于https://www.w3cschool.cn/weflow/weflow-rem.html REM 兼容适配解决方案 什么是 REM REM（Font size of the root element）是指相对于根元素的字体大小的单位。 范例： 若根节点font-size设置为 10px，则使用 3rem 时，计算后得 3*10 = 30px如果根节点设置为 20px，侧计
html手机端最小字体,移动端chrome下使用rem的最小字体问题
weixin_29843603的博客
05-31 616
移动端chrome下使用html{font-size：62.5%}显示的是12px，而-webkit-text-size-ajust:none属性在新版chrome下已经被弃用了，请问各位是如何解决的font-size给高点又不会死。。csshtml{font-size:20px;}然后rem可以以20为基准了。如果想让中文字体比12PX小，可以用CSS3的变形 scale-webkit-text...
rem布局，页面加载时先放大一下再回复正常
悦己
04-23 4084
先贴上我的rem布局的一段js: window.onload=function(){ setRemSize(); window.addEventListener("resize",setRemSize,false);  function setRemSize(){    var _clientWidth = document.documentElement.clientWidth/7.2
ajaxfileupload 返回json解析出错 带有<pre>标签
hmg_monkey的专栏
12-28 6333
首先公布解决办法： 将ajaxfileupload中uploadHttpData方法里 eval( "data = " + data ); 改为 data = jQuery.parseJSON(jQuery(data).text()); 即可！ 另外由于jquery版本升级，老版本中的方法弃用导致方法不存在，在ajaxfileupload中添加上此方法即可 handleError:
vue中使用px2rem-loader
最新发布
05-31
在Vue中使用px2rem-loader，需要先安装相关依赖： ``` npm install postcss-loader postcss-px2rem --save-dev ``` 然后在webpack配置文件中添加相关配置： ```javascript module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('postcss-px2rem')({ remUnit: 75 // 设计稿宽度/10 }) ] } } ] } ] } ``` 这里的remUnit的值需要根据设计稿的宽度来设置。如果设计稿宽度是750px，则remUnit需要设置为75，如果是640px，则remUnit需要设置为64。这样就可以在Vue中使用px2rem-loader了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值