移动端rem单位和px单位换算

rem单位是根据html元素的单位在页面根据不一样的手机屏幕分辨率动态总体的按比例缩小或放大字体。

假如html{font-size: 14px;},那么1rem=14px;

一个div宽度48px,那么换成rem:48px/14px=3.4rem; 

宽度200px,换成rem:200px/14px=14.3rem;

宽度28px，换成rem:28px/14px=2rem;

 

可是建议设置成html{font-size:62.5%},为何是62.5%？由于任何浏览器默认字体大小是16px,也就是16px=100%;那么1px=6.25%,为了方便计算，咱们把10px=62.5%,所以html{font-size:10px;}=html{font-size:62.5%},1rem=10px;

一个div宽度48px,那么换成rem:48px/10px=4.8rem; 

宽度200px,换成rem:200px/10px=20rem;

宽度28px，换成rem:28px/10px=2.8rem;