移动端 h5 (rem px 的不同写法造成视觉上的偏差,求解决 ) 20C

图片说明
背景:
某天我老板说要左侧的这个app 圈红线处 跟右侧app 的icon一样,但我用了rem 做布局之后发现在我华为手机上 两个app中 的icon大小是一样的 但是其他设备 例如iphone7plus 上左侧的icon 明显大于右侧 想知道这问题怎么解决
写法:
左侧app 和右侧app 是相同的排版
但是写法不一样 左侧用的是flexble.js 加上rem做单位
右侧虽然也是rem 但并没有js去动态改变font-size的大小,而是直接用html {font-size:14px} 加上rem的写法

8个回答

按你的描述,不一样大不是正常的吗?flexble.js是以视口宽的1/10为font-size,然后1rem相当于视口宽的1/10之一了,是响应式的写法,而另一个你直接写死font-size为14px,那1rem不就是14px固定的了吗,另外,设置viewport的大小也会影响你的布局

weixin_42499894
weixin_42499894 抓包看html的内容吧
大约 2 年之前 回复
qq_40781237
qq_40781237 dadasdadadacc
大约 2 年之前 回复
asakurayohj
asakurayohj 回复qq_26969485: 抓包看html的内容吧
大约 2 年之前 回复
qq_26969485
qq_26969485 回复asakurayohj: 我的viewport我知道 但是另一个是别人的app 所以我也不知道
大约 2 年之前 回复
asakurayohj
asakurayohj 回复qq_26969485: 对于同一个设置,两个页面的viewport设置一样(无论是指定的大小,还是使用默认的视口大小),同样px大小的元素其视觉大小也是一样的
大约 2 年之前 回复
qq_26969485
qq_26969485 回复asakurayohj: 我能不能直接用px 去设置icon的大小 因为我想着rem会等比例缩放 如果用px的话就不会了,您的这种方法如果我改动了的话相当于整个app所有页面都要动。所以想问问能不能用px
大约 2 年之前 回复
asakurayohj
asakurayohj 回复qq_26969485: 一种是都使用flexble.js的方法,另一种改动可能会大一点,设置viewport的大小,比如都为360宽,然后以此为基础去布局,比如图标都是36px*36px,这样图标等于都是视口宽的1/10,在同一个手机上两个icon大小是一样的
大约 2 年之前 回复
qq_26969485
qq_26969485 但是我伟大的老板说 他要在他的手机上看到两个icon 一模一样大 然后我就没有解决方法了
大约 2 年之前 回复

左侧和右侧的rem基于的标准不一样,html的font-size可以设置了不同的大小吧

对于同一个设置,两个页面的viewport设置一样(无论是指定的大小,还是使用默认的视口大小),同样px大小的元素其视觉大小也是一样的

rem是相对于根元素(html)字体大小的单位,控件的大小 = 控件的rem * html.font-size。
右侧固定是font-size:14px,所以看看左侧的font-size值是不是也是14px。

对于同一个设置,两个页面的viewport设置一样(无论是指定的大小,还是使用默认的视口大小),同样px大小的元素其视觉大小也是一样的试试吧

简单来说 对于同一个设置,两个页面的viewport设置一样(无论是指定的大小,还是使用默认的视口大小),同样px大小的元素其视觉大小也是一样的应该就可以

同一设置,两个viewport设置一样

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问