手机长度px值_Rem-- ui图与适配手机的px换算

本文详细介绍了如何将UI设计稿的px值转换为手机端适配的rem值,通过实例解释了75px作为基数的转换方法,并探讨了不同手机型号的html字体大小设置。此外,还提到了px转rem的工具,如cssrem插件、postcss-px2rem和px2rem-loader。
摘要由CSDN通过智能技术生成

找了很多的文档,就这个问题,越看越糊涂,写的公式都是直接给出,但是并没有说公式是怎么推演出来的,搞得我好烦。rem =x/75, 实在搞不懂,就自己写了,

大家都明白,假设html的fontSize:16px;那么1rem = 16px;是不是可以理解为1个rem单位等于16px;

以750的设计稿为例:(手淘插件 flexible.js)

1--把设计稿平均分成10份,每份是750/10=75px;把每份假设为一个叫xm单位,那么就是1xm = 75px;这句是不是和上一句很像,可以假设为750px的页面,他的html的fontsize=75px;

2--现在想一下手机是375px的页面,也把他按照步骤1平均分成10份,每份375/10 = 37.5px,  设置为html的fontsize ,结果:1rem = 37.5px; 那么其他的手机的html的fontsize用js表示

fontSize = document.documentElement.clientWidth/10 + "px";

3--暂时忘记1,2步骤,iphone6是2倍像素的手机,与设计稿对比,750的宽,在iphone6是375px,或者,量取设计稿中一个元素,width = 100px,  那么在手机端css的值应为50px,看下列表格,已经知道的数据就是前两列的值。那么后两列的值是怎么算的呢

750UI图假设的fontsize的值(步骤1)

手机 html fontsize的值(步骤2)

UI量取的宽度(

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值