光辉岁月_ 2021-10-20 08:47 采纳率: 50%
浏览 39

前端 rem和px如何进行转换?

写h5的页面的时候 设计图是750的,那么里面的px应该怎么进行转换?
我自己在Hbuilder里面设置的比例是 1:75 但是感觉设计出来的比较小,这事为啥?

谢谢!

  • 写回答

3条回答 默认 最新

  • 神仙别闹 2021-10-20 08:54
    关注

    rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定。
    例如浏览器默认的字号16px,来看一些px单位与rem之间的转换关系:

    |  px  |     rem       |
    ------------------------
    |  12  | 12/16 = .75   |
    |  14  | 14/16 = .875  |
    |  16  | 16/16 = 1     |
    |  18  | 18/16 = 1.125 |
    |  20  | 20/16 = 1.25  |
    |  24  | 24/16 = 1.5   |
    |  30  | 30/16 = 1.875 |
    |  36  | 36/16 = 2.25  |
    |  42  | 42/16 = 2.625 |
    |  48  | 48/16 = 3     |
    -------------------------        
    

    如果设定html{font-size:14px},那么后面的CSS里面的rem值则是以这个14来换算,例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px,同理,假如一个设计稿为宽度42px,高度为35px,则换成成rem,则是42/14=3rem,35/14=2.5rem。 如果css里面没有设定html的font-size,则默认浏览器以1rem=16px来换算。

    评论

报告相同问题?

问题事件

  • 创建了问题 10月20日

悬赏问题

  • ¥15 一道python难题
  • ¥15 用matlab 设计一个不动点迭代法求解非线性方程组的代码
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试
  • ¥20 问题请教!vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法,未来数据怎么降尺度