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

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

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

这种方法是网易的做法，如果采用该方法需要将视口设置为一下才可以

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

下面的代码中的6.4是基于iphone的宽度为640的设计稿，如果是750的修改为7.5即可，当设备宽度大于640后则物理分辨率大于1280，这时就应该去访问pc站点了。这时设计稿中的宽度除以100即为rem的宽度，如设计稿为20则rem为.02rem

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

利用媒体查询来设置

这种方式和上面的差不多，只不过是将fontsize设死了，同样需要添加视口设置。

html {  
  font-size: 100px;
}  
@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。