rem初学使用(2)

在html中设置了font-size的值,
例如我设置的是 font-size = 20,
然后拿到UI人员提供的项目原型,看一下原型的设置是基于什么大小,
例如UI图是宽750的原型,
然后font-size是20,
那么我们在宽750的基准的元素的宽是78.75px的话,那么我们要设置的是
750/20 = 37.5
78.75/37.5 = 2.1rem;
ps;(每次计算元素px和rem转换的时候,都用px的值除以这个37.5这个值,得到的就是rem的值)

如果我们是在375的设备为参考做元素的设置,那么我们要设置的是
375/20 = 18.75
78.75*375/750 = 39.375px(750和375的比例下应该的px值)
39.375/18.75 = 2.1rem;
ps;(每次计算元素px和rem转换的时候,都用375比例下的px的值除以这个18.75这个值,得到的就是rem的值)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...
    张宪宇阅读 2,288评论 0 5
  • 一年前笔者写了一篇 《手机端页面自适应解决方案—rem布局》,意外受到很多朋友的关注和喜欢。但随着时间的推移,该方...
    梁相辉阅读 121,123评论 432 709
  • 十岁的小侄子,已经是什么话题都可以插一嘴的 年纪。 然而对话中,有很多的为什么和不知道 。还有很多不知道从哪里来的...
    骆驼和马阅读 282评论 0 0
  • 接口 interface PHP 类是单继承,也就是不支持多继承,当一个类需要多个类的功能时,继承就无能为力了,为...
    洞房花猪阅读 930评论 0 0