javascript - 移动端单位rem和px混合使用问题
PHP中文网
PHP中文网 2017-04-11 11:51:21
[JavaScript讨论组]

如图

我们开发是字体默认使用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不应该这样给我标注尺寸
PHP中文网
PHP中文网

认证0级讲师

全部回复(1)
PHP中文网

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

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号