页面设置rem值，但是值不是正确的px

最新推荐文章于 2023-05-24 13:57:45 发布
最新推荐文章于 2023-05-24 13:57:45 发布
阅读量672 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hua_ban_yu/article/details/120292359
在开发手机页面时，遇到字体大小计算错误的问题。设置了根节点字体为75px，标题字体设为0.4rem，预期应为30px，实际显示为39px。解决办法是在样式中添加`-webkit-text-size-adjust: none`属性，以修正字体渲染的不一致。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在开发手机端页面遇到一个奇异问题，设置了根节点字体大小为75px，标题的字体也设置0.4rem，理论上字体大小应该为30px，但是从浏览器却发现字体大小为39px。如图

 

 解决方案：添加 -webkit-text-size-adjust: none  属性

 

 

hua_ban_yu
关注
jsp使用rem页面内容不能根据屏幕分辨率自适应_为什么很多web项目还是使用 px，而不是 rem？...
weixin_39592240的博客
12-25 514
是不是当你接触到 rem 的时候，感觉 rem 很强大。但是自己接触到的公司项目全部都使用 px，是不是心里有一万个为什么？想知道吗？是你的公司技术更新落后了吗？有这个疑问的小朋友，如果我没猜错的话，可以肯定你不了解px，且心里肯定认为rem比px好。如果真是这样，那我们就得好好说说这个问题了。首先得先弄懂什么是px什么是rem？现实中真的有太多的人在正在使用rem布局，但他们却没搞懂什...
在react中配置Antd Mobile后导致px转rem失效问题及配置文件别名失效问题的解决办法
weixin_57156917的博客
09-01 1865
1.首先打开antd-mobile的官方文档 https://mobile.ant.design/docs/react/use-with-create-react-app-cn 安装 npm install antd-mobile --save 第二步： 下载 npm install react-app-rewired customize-cra --save-dev 第三步：打开package.json ，找见scripts直接全部替换 /* package.json *...
页面设置rem但是值不是正确的px
cyssxt的博客
08-01 1111
在谷歌浏览器中，我设置了html字体大小为8，某个div的宽度为37.2但是调试的时候浏览器中div实际的宽度仍未372px，这是因为在谷歌浏览器中字体的大小为10px，虽然你设置成了8px其实还是10px
移动响应式开发rem转px，获取尺寸小数点丢失问题
吃不胖的程序猿历程
08-01 1083
js/jq获取元素尺寸都是整数（四舍五入），浏览器上看却是小数       公司项目开发时遇到的比较烦的问题，rem做适配是渲染是转px会产生小数的情况，特定的情况是需要获取元素真实的尺寸，目前没找到获取的办法（有好的办法可以留言）然后就想到重置元素的尺寸var height = $('#wrap li').height();$('#wrap li').h...
px转换rem给宽高设值 -- 坑（js）
weixin_41451859的博客
04-13 599
px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的； rem是CSS3新增的一个相对单位，是以根元素的字体大小为基准计算的。 通常情况下px转换rem时都以1:100的比例来方便计算（UI图：750 举例） // 根元素fs const w = document.documentElement.clientWidth; document.documentElement.style.fontSize = w / (750 / 100) + 'px' /* 元素: f..
HTML5页面布局px转rem解决方案
最新发布
07-28
这需要遍历所有CSS规则，将px值替换为基于视口宽度（viewport width, VW）的rem值。 CSS后处理器：还可以使用PostCSS等CSS后处理器，配合postcss-px2rem插件完成转换。 在实际应用中，html5-px2rem项目通常包含以下...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
安装：`npm i postcss-plugin-px2rem -D`，然后在`vue.config.js`中配置`loaderOptions`，引入`postcss-plugin-px2rem`，同样设置`rootValue`为75。 ```javascript module.exports = { css: { loaderOptions: { ...
Vue项目自动转换 px 为 rem的实现方法
01-19
然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。 技术栈...
详解vue2.0 不同屏幕适配及px与rem转换问题
08-27
在项目的静态文件夹中设置合适的viewport元标签，以确保页面能够根据屏幕宽度正确显示。 这些步骤可以帮助开发者在Vue 2.0项目中轻松实现不同屏幕的适配，并且通过工具插件自动化px到rem的转换过程。通过这些实践...
html5px2remHTML5页面布局单位由px转换rem解决方案
08-11
"px2rem"是解决这个问题的一种方法，它涉及到CSS中的单位转换，旨在实现更加动态和自适应的页面布局。 `px`（像素）是我们传统上使用的布局单位，它是固定的，不会根据屏幕大小变化。但在移动设备上，为了适配各种...
关于手机移动端像素px转rem问题
博客
09-22 467
使用我的750px=10rem ==该比例是初学移动端时直接使用vscode编译器使用cssrem和px to rem 两个插件设置换算比例值== 老师的效果 使用老师css样式的效果 经过对比发现
解决React引入ant design之后默认字体大小变成14px的问题
weixin_44020310的博客
08-19 4175
解决React引入ant design之后body中默认的字体大小变化的问题 在做rem,em,px比较的时候发现 em不太对劲，继承的font-size居然不是16px； 一般浏览器默认的字体大小为16px，而ant design的默认字体大小为14px 查看html，head，body，元素，发现ant design在body那里设置了font-size，导致后面的继承了body的14px，并且，因为css引入顺序的问题，导致ant design的css样式会覆盖掉自己写的css； 由于body是不带
H5 页面 不对 px 进行转 rem
weixin_43794749的博客
05-24 712
【代码】H5 页面 不对 px 进行转 rem。
修改cssrem里面html的字体大小
m0_48497187的博客
10-04 630
移动端页面开发有时要考虑不同屏幕大小的适配问题，就要用到rem。但是计算rem又是一件稍微有点麻烦的事情，虽然可以用less来计算，但是还有一个更快捷的方法。 cssrem是VS code上面一款能够自动将px转成rem的插件。 由于cssrem默认的html字体大小是16px，如果需要修改html的字体大小，则需要设置。 首先打开设置，搜索 cssroot，然后修改成你想要的字体大小，保存。 关闭VS code，再打开VS code，就能改变html的字体大小了。 ...
移动端rem定位不准确的解决
yaime的博客
07-06 1624
问题出现 在项目中使用rem进行适配，在大部分机型上都没有问题，但是在某些机型上却出现了百分比的适配正确，rem的适配明显出现错误，导致出现横向滚动条或者图标叠起来的问题。 问题排查 拿到代码后重新跑了几遍发现通过js算出的font-size值应该是正确的，添加到元素的时候也是正确的，那哪里会出问题呢？打印了很多获取值之后加上搜索大家遇到的问题，发现了这篇文章，里面的情况和我的很相似，于是尝试着alert了两个值，一个是document.documentElement.style.fontSize一个是 w
vue项目使用px2remLoader插件将px转为rem之后加载瞬间尺寸由小变大，页面闪现错乱样式
mao871863224的博客
12-18 1955
vue项目使用px2remLoader插件，在index.html自定义设置font-size的大小，尤其是在首屏加载的时候，会出现页面各个元素尺寸由小变大的一个过程，很难看 刚开始一直在想是不是因为css文件过大，加载的时候先渲染了页面，然后css文件加载完之后样式才恢复正常，后来使用gzip压缩了打包的文件之后还是这样，（使用gzip打包可以减少打包文件体积，减少首屏渲染的时间，详见），还使用了v-cloak方法，并没有生效。转换思路，最后发现是px转rem的原因！ 在index.html文件中自定义了
动端自适应rem的设置-- 关于字体大小
Mc123455的博客
03-31 571
pc端浏览器一般默认16px 如果是iPhone5的尺寸，那么根元素字体大小就是32px； 如果是IPhone6的尺寸，那么根元素字体大小就是37.5px； 在vscode 编辑器中，想输入 px 主动转换对应rem，需要改变默认字体大小 重启 vscode 即可 否则 默认16px 直接转换是 178 X 16 = 11.125rem 到浏览器查看是 高是417.188px...
探究为何rem在chrome浏览器上计算出错
weixin_30879833的博客
05-12 362
最近在一个项目中，测试同学提了一个bug，说手机上有个页面的某些字体显示偏大。就像这样 我用chrome浏览器在pc上测试了一下，发现pc上也有这个问题，但是用其它浏览器打开这个页面就没有发现这个问题。 于是，上网百度了一下，发现原来是chrome浏览器的问题。 通过各种百度Google然后我总结了一下这个问题产生的原因： chrome浏览器目前支持的最小的字体大小为12px，而我在h...
jsp使用rem页面内容不能根据屏幕分辨率自适应_前端基础：如何更好的使用em、rem...
weixin_30005929的博客
12-03 538
em和rem都是前端开发中表示长度的单位，特别是在移动端的开发中应用最广，可能很多前端新手对这两个单位平时虽然在用，但可能不太理解，这篇文章也许正好可以帮助你更好的理解。em，rem怎么用rem是实现自适应布局的常用方法。rem以根元素字体大小为基准，em以父元素字体大小为基准对rem而言，的字体大小为14px，1rem就等于14px，2rem就等于28px。对em而言，父元素的字体大小为14px...
rem值解释
05-16
一旦设置了根元素的字体大小，就可以轻松地通过 REM 来控制页面上的任何属性，比如宽度、高度、边距等。下面是一个简单的例子： ```css .box { width: 10rem; /* 等于 160px */ height: 5rem; /* 等于 80px */ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值