javascript - 移动端单位rem和px混合使用问题

问题描述

问 题

如图

我们开发是字体默认使用px 而其他单位使用的是rem，那么我就产生疑问了。
在竖直高度上来看， 已上图为例：
因为已经给出左侧图片的详细参数，所以高度固定,则为 1.82rem(我们设置1rem ==font-size:100px),
而中间部分的文字，就会不太好 控制，比如 4个间距分别是 .36rem, .14rem , .16rem, 36rem 那么在加上文字 高度(xx)px 那么重高度肯定不会是1.82rem。导致在不同大小显示器上文字偏移以及和图片相对位置偏移。 我当时的做法是对中间文字部分的间距自己做了调整，就是说 .14rem和.16rem我并没有按照设计稿的尺寸做，那样看起来才更合适，但是脱离设计稿的尺寸，我的自己做法肯定不太可取。

所以我想知道，在这种情况下应该怎么处理 ，
是应该中间位置的文字跟随图片的大小和尺寸（即总高度固定），
还是应该先控制好中间部分文字，再让控制图片（即总高度先不固定），
或者说字体用px单位会更好一点，还是有其他跟好的解决办法。

还有 我们的设计师在给出文字之间的行间距是这样的：

紧贴着上下两行来测量高度，而我再开发的时候，比如下图，明显2个回答字样距离span标签顶和底都略有间隙，在a标签和p标签下字体越大越明显，这样在我开发的时候就很难给出每一个距离准确的数字。

所以我想知道  这样的问题我应该怎么处理  或者说UI不应该这样给我标注尺寸

解决方案

根据你的描述，你们移动端的适配采用的是media query的方案

移动端的设计稿一般是给iphone6的750*1334

将设计师给你的尺寸转为rem，全部都用rem，文字字体大小，行距等等

下面说的行距的问题其实很好解决，多行文本，从某行字的最上沿到下一行字的最上沿就是准确的行距（px）啦，你再转为rem就好了

这篇关于javascript - 移动端单位rem和px混合使用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！