rem适配移动端

rem适配移动端

rem:是一个相对单位,相对根元素字体大小的单位

html{

    font-size:100px;/*1rem=100px*/

}


计算:

1(px)/实际屏幕宽 = 1(rem)/设计屏幕宽

1(rem) = 设计屏幕宽*(1(px)/实际屏幕宽)


以设计屏幕宽为750px为例:

function(()=>{

    let body=document.getElementsByTagName("body")[0];

     let screenWidth = body.offsetWidth

     body.style.margin = 0;

     document.getElementsByTagName("html")[0].style.fontSize = screenWidth / 750 * 100 + "px"

})()

这样设计稿的1px相当于浏览器中的0.01rem;

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