1. 创建目录结构

2. 引入 normalize.css 初始化样式。

3. 编写公共的 common.less 文件 。

1. 编写common.less 设置常见的屏幕尺寸：

 /*
    1. 设置常见的屏幕尺寸 修改里面的 HTML 文字大小
 */

/* 因为我们pc端也可以 打开苏宁移动端首页，我们默认HTML字体大小为50px，注意这句话写在最上面*/
html {
  font-size: 50px;
}
@no: 15; /*  将屏幕宽度划分为 15 份  */
@media screen and (min-width: 320px) {
  html {
    font-size: 320px / @no;
  }
}

@media screen and (min-width: 360px) {
  html {
    font-size: 360px / @no;
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 375px / @no;
  }
}

@media screen and (min-width: 384px) {
  html {
    font-size: 384px / @no;
  }
}

@media screen and (min-width: 400px) {
  html {
    font-size: 400px / @no;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 414px / @no;
  }
}

@media screen and (min-width: 424px) {
  html {
    font-size: 424px / @no;
  }
}

@media screen and (min-width: 480px) {
  html {
    font-size: 480px / @no;
  }
}

@media screen and (min-width: 540px) {
  html {
    font-size: 540px / @no;
  }
}

@media screen and (min-width: 720px) {
  html {
    font-size: 720px / @no;
  }
}

@media screen and (min-width: 750px) {
  html {
    font-size: 750px / @no;
  }
}

4. 创建 index.less文件 并在 index.less 导入 common.less

1. 创建 index.less文件 并在 index.less 导入 common.less。使用 @import "" 导入。

  @import "common.less";

5. 注意

1. 页面元素大小（rem） = 页面元素（px） / html字体大小；

2. 如 width 为 100px 的盒子 要实现不同页面等比例缩放，写法如: width = 100rem / html字体大小。