写给自己看的适应不同手机屏幕

/* 使用normalize初始化 */
@import url('~@/assets/css/normalize.css')
/*  在pc端显示默认值*/
html {
  font-size: 50px;
}

/* 划份屏幕的份数 */
@no: 15;
/* 根据不同屏幕适  使用不同html标签大小 */
/* 当浏览器的视口宽度等于或大于 320px 且 小于360px*/
@media screen and (min-width: 320px) {
  html {
    font-size: 320px / @no;
  }
}
/* 当浏览器的视口宽度等于或大于 360px 且 小于375px*/
@media screen and (min-width: 360px) {
  html {
    font-size: 360px / @no;
  }
}
/* 当浏览器的视口宽度等于或大于 370px 且 小于384px*/
@media screen and (min-width: 375px) {
  html {
    font-size: 375px / @no;
  }
}
/* 当浏览器的视口宽度等于或大于 384px 且 小于400px*/
@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;
  }
}
/* 当浏览器的视口宽度等于或大于 750px*/
@media screen and (min-width: 750px) {
  html {
    font-size: 750px / @no;
  }
}

body {
  /* 最小为320px */
  min-width: 320px;
  /* 把屏幕划分为15等分 */
  width: 15rem;
  /* 居中 */
  margin: 0 auto;
}

后面根据设计稿给的宽度或者高度 把px单位换算成rem单位