同样大小rem的字体在浏览器中显示大小不一致的问题

最新推荐文章于 2023-09-26 16:01:47 发布
最新推荐文章于 2023-09-26 16:01:47 发布
阅读量2.2k 收藏 4
点赞数 2
分类专栏： css chrome 文章标签： css chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rwzhang/article/details/112426453
版权

在做手机端web的时候发现css中设置的同样字体大小的两块内容，实际显示的字体大小差异明显！测试后发现字体大小会随着文本块中文本内容数量的变动而变动。网上查阅资料发现是chrome对字体优化导致的，在css中加入如下代码后问题解决：

-webkit-text-size-adjust: none;
text-size-adjust: none;

PS：还有一种方式是将display设置为inline-block

 

 

Override笑看人生
关注
专栏目录
rem自适应之postcss-pxtorem
weixin_38649188的博客
03-27 1115
在使用antd或者其他组件库时，有的组件也可能用到内联样式，px没有被转换成rem，导致样式不正确，需要手动修改。设计稿是1920*1080px，pxtorem我们设置rootValue是19.2，19.2px=1rem。8）exclude（String, Regexp, Function）要忽略并保留为px的文件路径。4）selectorBlackList （Array）要忽略的选择器，保留为px。3）propList （Array）可以从px更改为rem的属性。注意最好不要和umi的hd方案同时用！
android webview 字体 系统字体大小,【转】android webview设置内容的字体大小
weixin_39913422的博客
05-25 1278
Enumforspecifyingthetextsize.SMALLESTis50%SMALLERis75%NORMALis100%LARGERis150%LARGESTis200%原文：http://www.cnblogs.com/yourancao520/archive/2012/06/14/2548900.html/***webview*/WebVi...
rem字体在rem盒子里面不一样，或者不同的行解决
04-18 134
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rem</title> <meta name="viewport" content="width=device-width, use...
动端自适应rem的设置-- 关于字体大小
Mc123455的博客
03-31 514
pc端浏览器一般默认16px 如果是iPhone5的尺寸，那么根元素字体大小就是32px； 如果是IPhone6的尺寸，那么根元素字体大小就是37.5px； 在vscode 编辑器中，想输入 px 主动转换对应rem，需要改变默认字体大小 重启 vscode 即可 否则 默认16px 直接转换是 178 X 16 = 11.125rem 到浏览器查看是 高是417.188px...
关于CSS中 用“rem" 在谷歌浏览器下的问题
qq_21830361的博客
03-23 7165
rem是css3新定义的设置字体大小属性，常用的两种字体大小设置有下面2种： 1、 px为单位 2、em为单位(百分比用法跟em类似) PX为单位 在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较精确和固定。只要页面某元素设置了px字体大小，其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素高的话，该子元素/子孙元素会继承其父元素的
rem布局，系统字体大小发生变化是，页面样式错乱的问题
悦己
02-16 4610
最近做的一个APP，昨天测试的时候，发现在大多数手机上页面用rem布局，都是可以适配的，但是在一些手机上（比如三星A8000,默认字体大小比较大）出现了混乱，看上去像是宽度不够，有些元素被挤下来，整个页面被拉伸了一些，后来打印出当前页面根元素的字体大小，我设置的100px，但在这些手机上都是比100px大，因为这些手机系统设置的字体大小，比较的大，这时候，可以让安卓的小伙伴们，在每个webview
解决layer弹出层自适应页面大小的问题
10-16
2. 使用em或rem单位：这些相对单位依赖于父元素的字体大小，同样可以实现自适应，但在某些情况下可能导致布局混乱。 3. area: 'auto'：此设置可能导致弹出层的高度和宽度填充到其父容器的整个空间，对于包含滚动条...
移动端html字体大小自适应,【css】移动端响应式布局与响应式字体大小
weixin_36476970的博客
06-07 1920
前言：移动设备(手机、平板电脑等)，已经逐渐成为人们生活中必不可缺的物件了，这也意味着人们更多的用移动设备浏览网页。然而移动设备有着各式各样的分辨率与大小，这使用前端开发人员不得不去设配它们。相关链接：【css】移动端自适应布局与字体大小自适应前言二： 说到移动设备，一个不得不提就是viewport的设置了其中：①、width=device-width：是设置可视区宽度等于设备宽度②、initia...
rem布局在webview中页面错乱解决办法
青梅煮码
05-05 703
最近做了个原生的小游戏，在浏览器和绝大部分手机上也正常，但在底层内核是IE的上面的都会有问题，查看代码，html的font-size设置正常，考虑是rem布局的问题，网上搜了搜发现原来是系统字体大小计算不一致的问题，这类问题常见于安卓设备上，在微信浏览器，qq浏览器，360浏览器，华为浏览器都是会遇到这种问题。 解决方案 方案一（获取系统字体大小） 一...
手机端转换rem适应
08-30
- 使用`rem`时，要考虑到不同浏览器的兼容性，尽管现代浏览器普遍支持`rem`，但较旧版本的浏览器可能不支持，因此在必要时需要提供备选方案。 - 设置基础字体大小时，要考虑到可读性和最小可接受尺寸，以避免在小...
使用rem单位的问题——Google下字体很大
07-28 264
rem的看法 rem单位确实好处蛮多的，它是相对于根节点，让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是，你用过了就知道，它会出现一个问题： 用Chrome浏览器打开你做的网站的时候，有时候会出现字体很大的情况。但是刷新一下页面就好了。 之所以会出现这种情况，原因是因为我们为了计算方便，将原本默认1rem=16px修改1rem=10px。因此，我们在ht...
解决rem布局，在用户调整手机字体大小/用户调整浏览器字体大小后，布局错乱问题...
weixin_30335353的博客
08-28 412
一、用户调整浏览器字体大小，影响的是从浏览器打开的web页。 (function(doc, win) { // 用原生方法获取用户设置的浏览器的字体大小(兼容ie) if(doc.documentElement.currentStyle) { var user_webset_font=doc.documentElement.c...
html 1em,html – 为什么IE10中的“font-size：1em”比Chrome更大？
weixin_28697603的博客
06-11 131
我目前正在开发一个网站,我无法弄清楚为什么文本在IE10中显示比在Chrome中更大. (我确保两个浏览器都设置为100％缩放 – 不多也不少.)我的CSS中有一个重置：body {font-size：1em; }.在Chrome(v27.0.1453.116 m)中,这会按预期显示 – 如果我将CSS中的规则更改为font-size：100％;或font-size：16px;,没有任何明显的变化...
不同字体在浏览器下的表现总结
cychai的专栏
01-21 858
不同字体在浏览器下的表现总结
浏览器字体大小问题
cychai的专栏
11-26 1637
Google Chrome浏览器字体为什么与IE8显示不一样
【HTML5移动端开发】[rem + 百分比布局] 加载抖动（高度不一致）解的决方法
qq_31381917的博客
11-07 6866
解决移动端rem+百分比布局加载瞬间页面错乱的方法 以下的内容和观点未经大牛级别验证，有错误的地方请大牛留言指教~！ 移动端布局有很多种，这里我最常使用到 rem+ 百分比 的布局方式（高度/字体设置rem单位，宽度设置百分比）来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。 页面在
移动端rem布局加载瞬间的尺寸有bug 由大变小 或者有小变大，怎么解决?
weixin_42137023的博客
10-21 2399
  我是这样解决的    1  body 或者html 加个visibility：hidden;  或者用opacity：0； &lt;body style="visibility: hidden;"&gt;&lt;/body&gt; 2 使用rem  加载完成后的函数调用 body属性的visbility：visible; (function(doc, win) {     var ...
rem布局刷新页面瞬间尺寸从小变大；页面css样式错乱；跳转出现闪烁；页面渲染错乱
最新发布
qq_43636471的博客
09-26 419
rem布局刷新页面瞬间尺寸从小变大；页面css样式错乱；跳转出现闪烁；页面渲染错乱。原因：rem转px的缘故，rem.js中DOMContentLoaded事件是在html构建完成即加载，css样式可能未加载生效。解决方法：body添加属性opacity:0，在未加载完之前不显示。在onload事件中将body的opacity变成1。
rem设置网页字体大小自适应
泛泛格调
11-21 2191
「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的...
postcss-pxtorem字体大小
08-18
`postcss-pxtorem` 是一个用于将 CSS 中的 px 单位转换为 rem 单位的 PostCSS 插件。它可以帮助实现响应式布局和字体大小的适配。 要使用 `postcss-pxtorem` 将字体大小转换为 rem 单位，你需要按照以下步骤进行配置： 1. 安装 `postcss-pxtorem`：在项目中运行以下命令安装 `postcss-pxtorem`： ``` npm install postcss-pxtorem --save-dev ``` 2. 创建 PostCSS 配置文件：在项目根目录下创建一个 `postcss.config.js` 文件，并添加以下内容： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // 设置根元素的字体大小，通常为网页的基准字体大小 propList: ['font-size'], // 需要转换的属性列表，这里只包含字体大小 selectorBlackList: [], // 不需要转换的选择器列表 }, }, }; ``` 请根据你的具体需求调整 `rootValue` 的值，它表示根元素的字体大小，一般情况下为网页的基准字体大小，通常是 `16px`。 3. 使用 PostCSS：在构建过程中使用 PostCSS 处理 CSS 文件，并应用 `postcss-pxtorem` 插件。具体的配置方法取决于你使用的构建工具（如 webpack 或 gulp）。 例如，在 webpack 中配置 PostCSS 的方法如下： - 安装必要的 webpack loader： ``` npm install postcss-loader --save-dev ``` - 在 webpack 配置文件中添加 PostCSS loader： ```javascript module.exports = { // ... module: { rules: [ // ... { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', ], }, ], }, // ... }; ``` 请确保在你的构建工具中正确配置了 PostCSS 插件。 这样，当你在 CSS 文件中使用 `font-size` 属性设置字体大小时，`postcss-pxtorem` 将会自动将其转换为 rem 单位。 请注意，`postcss-pxtorem` 的具体配置和使用方式可能会因个人需求和项目设置而有所不同。确保阅读并遵循 `postcss-pxtorem` 的文档和示例，以确保正确地配置和使用该插件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值