手机端--自适应页面rem

一、手机端自适应rem
(1)样式重置、定义字体大小

/*样式重置这块省略，大同小异*/
/*定义字体大小*/
@media screen and (min-width:320px) {
  html {
  font-size:42.66px;
}
body {
  font-size:12px;
}
}@media screen and (min-width:360px) {
  html {
  font-size:48px;
}
body {
  font-size:12px;
}
}@media screen and (min-width:375px) {
  html {
  font-size:50px;
}
body {
  font-size:12px;
}
}@media screen and (min-width:384px) {
  html {
  font-size:51.2px;
}
body {
  font-size:14px;
}
}@media screen and (min-width:400px) {
  html {
  font-size:53.34px;
}
body {
  font-size:14px;
}
}@media screen and (min-width:414px) {
  html {
  font-size:55.2px;
}
body {
  font-size:14px;
}
}@media screen and (min-width:424px) {
  html {
  font-size:56.54px;
}
body {
  font-size:14px;
}
}@media screen and (min-width:480px) {
  html {
  font-size:64px;
}
body {
  font-size:15.36px;
}
}@media screen and (min-width:540px) {
  html {
  font-size:72px;
}
body {
  font-size:17.28px;
}
}@media screen and (min-width:720px) {
  html {
  font-size:96px;
}
body {
  font-size:23.04px;
}
}@media screen and (min-width:750px) {
  html {
  font-size:100px;
}
body {
  font-size:24px;
}
}

（2）html页面里面写上以下meta

<meta name="viewport" content="width=750,user-scalable=no" />

(3)这里的750rem宽就是100%宽