rem布局实现pc端网页自适应

首先，将HTML的font-size设置为100px,方便计算然后将body的font-size设置为正常值，例如：12px,不然其他的dom都会继承HTML的font-size，导致效果差距巨大，再在index.html页面中写动态设置font-size字体大小的js代码，当浏览器发生变化的时候，内容和位置也会相应发生变化，

当设计图是1920时，规定HTML的font-size的值就是100，当浏览器窗口为1920时，1rem = 100px

如下：

function setRem() { 
    let designSize = 1920; // 设计图尺寸

      let html = document.documentElement;

      let wW = html.clientWidth;// 窗口宽度
      let rem = wW * 100 / designSize; 

      document.documentElement.style.fontSize = rem + 'px';
 }
  window.addEventListener('load',setRem)
  window.addEventListener('resize',setRem)
           

然后在组件中使用scss语法，设置一个自动换算px的函数，方便修改，并且一目了然

@function px2rem($px) {
	$rem: 100px;
	@return ( $px / $rem) + rem;
}
           

此时一个margin-top为120px的边距的rem值为1.2rem

这时，我们只需要在使用px的地方使用 px2rem这个方法，就能自动换算成rem单位的大小，例如：

.circle {
		width: px2rem(10px);
		height: px2rem(10px);
		border-radius: 50%;
		background: red;
	}