Skip to main content

移动端适配方案

适配宽度​

@media screen and (min-width: 0px) and (max-width: 320px) {
  //  #FF0000
  html {
    font-size: calc(320px / 15);
  }
}

@media screen and (min-width: 321px) and (max-width: 360px) {
  // #FF7F00
  html {
    font-size: calc(360px / 15);
  }
}

@media screen and (min-width: 361px) and (max-width: 375px) {
  // #FFFF00
  html {
    font-size: calc(375px / 15);
  }
}

@media screen and (min-width: 376px) and (max-width: 384px) {
  // #00FF00
  html {
    font-size: calc(384px / 15);
  }
}

@media screen and (min-width: 385px) and (max-width: 400px) {
  // #00FFFF
  html {
    font-size: calc(400px / 15);
  }
}

@media screen and (min-width: 401px) and (max-width: 414px) {
  // #007FFF
  html {
    font-size: calc(414px / 15);
  }
}

@media screen and (min-width: 415px) and (max-width: 424px) {
  // #0000FF
  html {
    font-size: calc(424px / 15);
  }
}

@media screen and (min-width: 425px) and (max-width: 480px) {
  // #7F00FF
  html {
    font-size: calc(480px / 15);
  }
}

@media screen and (min-width: 481px) and (max-width: 540px) {
  // #FF00FF
  html {
    font-size: calc(540px / 15);
  }
}

@media screen and (min-width: 541px) and (max-width: 620px) {
  // #FF007F
  html {
    font-size: calc(620px / 15);
  }
}

@media screen and (min-width: 621px) and (max-width: 720px) {
  // #7A7A7A
  html {
    font-size: calc(720px / 15);
  }
}

@media screen and (min-width: 721px) and (max-width: 750px) {
  // #FFFFFF
  html {
    font-size: calc(750px / 15);
  }
}

@media screen and (min-width: 751px) and (max-width: 820px) {
  // #191919
  html {
    font-size: calc(750px / 15);
  }
}

适配高度​

主要用于移动端内容适配，由于移动端有时候需要根据高度来进行适配，比如 iPhone4 和 iPhone5 的宽度一样，但是高度不同

@media screen and (min-height: 320px) and (max-height: 375px) {
  //  #FF0000
}

@media screen and (min-height: 376px) and (max-height: 413px) {
  // #FF7F00
}

@media screen and (min-height: 414px) and (max-height: 480px) {
  // #FFFF00
}

@media screen and (min-height: 481px) and (max-height: 568px) {
  // #00FF00
}

@media screen and (min-height: 569px) and (max-height: 580px) {
  // #00FFFF
}

@media screen and (min-height: 581px) and (max-height: 600px) {
  // #007FFF
}

@media screen and (min-height: 601px) and (max-height: 630px) {
  // #0000FF
}

@media screen and (min-height: 631px) and (max-height: 640px) {
  // #7F00FF
}

@media screen and (min-height: 641px) and (max-height: 650px) {
  // #FF00FF
}

@media screen and (min-height: 651px) and (max-height: 670px) {
  // #FF007F
}

@media screen and (min-height: 671px) and (max-height: 700px) {
  // #7A7A7A
}

@media screen and (min-height: 701px) and (max-height: 750px) {
  // #FFFFFF
}

@media screen and (min-height: 751px) and (max-height: 800px) {
  // #191919
}

参考​