前端css页面适配不同尺寸

获取屏幕的宽度

    let offsetWidth = document.body.offsetWidth;//获取页面宽度

计算对应的缩放比列去进行适配

   <div className={styles.normal}
         style={{
              transform: `scale(calc(${offsetWidth} / 842)) rotate(0deg)` 
        }}
   ></div>

 

.normal {
  width: 842px;
  height: 630px;
  box-sizing: border-box;
  background: linear-gradient(0deg, #0a0f16 0%, #151f2d 100%);
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0px 0px;
}