html设置根rem,html rem适配

rem 布局适配方案

主要方法为：

按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；

css 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

设计稿中的字体使用 px 为单位，通过媒体查询稍作调整。

上代码

JS代码：

window.addEventListener('orientationchange', setRem);

window.addEventListener('resize', setRem);

setRem();

function setRem() {

var html = document.querySelector('html');

var width = html.getBoundingClientRect().width;

html.style.fontSize = width / 16 + 'px';

};

CSS代码：

// sass写法

@function rem($px) {

@return $px / 46.875 + rem;

}

//less写法

@rem: 46.875rem;

//stylus自行解决

？

用法：

如：元素宽300px,高500px；

传入参数即可：width:rem(300); height:rem(500);

rem算法解释：

例如：

1，设计图是750；

2，屏幕宽度/16；

计算步骤：

第一步： 750/16 = 46.875，1rem = 46.875

第二步：比如logo图片宽度为240px，那么width应该写成5.12rem