REM 布局(响应式布局)

第一步下载文件

名字 叫做 lib-flexible

点击下载

第二步加入代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./你下载好的目录/index.js"></script>

第三步 vscode 安装插件

名字叫做 px2rem+

第四步 修改配置

找到 vscode 里面的首选项-设置-扩展设置-px2rem 里面有个基准像素数

这里特别注意的就是 你设计稿最大尺寸要是 750px 基准数就是 75 要是 1080px 的 基准数就是 108

就是拿最大数除以 10

第五步 开始写代码

.content {
  .part1 {
    width: 2.666667rem;
    height: 2.666667rem;
    background: red;
    border: 1px solid yellow;
  }
  .part2 {
    width: 100px;
    height: 100px;
    background: green;
  }
}

// 这里特别说明的就是设计图上要是300px ,你写好300px后它下面会出现xxxrem供你选择。你只要选择rem那个就行