移动端开发的简单适配方案

现在是移动端的天下啊，但是在做移动端开发的时候会遇到很多坑，适配是必须要做的，这里总结一下自己平时写移动端页面的两种简单处理办法，希望能够帮到大家：

第一种：利用js来计算不同设备中的文字大小

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
           

以上代码中如果设计稿是750的记得把6.4改成7.5

第二种及时利用媒体查询来设置

html {
  font-size: 100px;
  background-color: #f9f9f9;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 50px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 56.25px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 58.59375px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 62.5px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 64.6875px;
  }
}
@media screen and (min-width: 440px) {
  html {
    font-size: 68.75px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 75px;
  }
}
@media screen and (min-width: 520px) {
  html {
    font-size: 81.25px;
  }
}
@media screen and (min-width: 560px) {
  html {
    font-size: 87.5px;
  }
}
@media screen and (min-width: 600px) {
  html {
    font-size: 93.75px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 100px;
  }
}
@media screen and (min-width: 680px) {
  html {
    font-size: 106.25px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 112.5px;
  }
}
@media screen and (min-width: 760px) {
  html {
    font-size: 118.75px;
  }
}
@media screen and (min-width: 800px) {
  html {
    font-size: 125px;
  }
}
@media screen and (min-width: 960px) {
  html {
    font-size: 150px;
  }
}
           

其实这两种办法只是简单的处理，如果要更好的处理，大家可以参考各大网站的方式，如：淘宝，网易等。

这是文字的适配，在正常些样式的时候设计稿的真是尺寸一半即为我们需要用到的尺寸。

这只是说了文字的适配，移动端的适配要想做到更好，最为重要的就是图片的适配，这里就不多说，大家有兴趣可以自行google。