rem 计算公式

Posted 2022-05-03 jony-it

rem 量图计算公式：

获取比值：设备尺寸/设计图尺寸 

例如：设备宽度尺寸为   375px 、设计图尺寸为750px，计算获得比值为0.5，量得设计图上某个图片元素宽度为 100px，实际在375px宽度的设备上此元素为 100 * 0.5 = 50 px。

故：

设置html 下font-size 默认值为 0.5px，为了计算方便一般会以100倍计算，也就是50px，如下：

@media screen and (min-width:375px) 
    html 
        font-size: 50px;
    

如上，此时在375的设备上 1rem  =  50px，在写css 的时候设置其宽度为0.5rem即可（.5rem 就等于 50px 的实际设备上的宽度，换算到ui设计图上，也就是 100px）

img.test_img
    width : .5rem  

 

附上其他网友拷贝的小米官网的写法：

// 小米官网的写法!function(n)
　　　// 获取window的document、dom-ele元素、i（ui设置图尺寸）、换算比率、监听对象名（orientationchange ios移动端横/纵向查看模式，resize 为window窗口尺寸改变事件）、定义方法a（处理html的font-size值）首先获取当前window的可见宽度，
存在则为320，最大为750像素，也就是说只针对2种尺寸的变化、document对象监听之前得到的事件名（resize或ios的change）当文档加载完毕或者重置尺寸的时候重新设置     var  e=n.document,          t=e.documentElement,          i=750,          d=i/100,          o="orientationchange"in n?"orientationchange":"resize",          a=function()              var n=t.clientWidth||320;n>750&&(n=750);              t.style.fontSize=n/d+"px"          ;          e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1)) (window);