移动端不同屏幕适配的方法

1. 使用js修改rem值的大小

这个方法比较简单，获取其他手机屏幕相对于iphone5手机屏幕的大小，然后放大和缩小html的fontsize值就可以了。这个方法有个缺点就是fontsize值可能为小数，有可能导致页面上的文字出现模糊不清的情况。只要微调下就可以并不是大的问题。js代码如下：

(function(){
  var scale = window.innerWidth/320;
  document.documentElement.style.fontSize = 10*scale+"px";
})()

使用上面这段代码是有前提的，就是页面必须要加这段html代码。

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

原因如下：

在移动端的发展过程中，早期的手机为了正常显示pc页面，手机默认的viewport的宽度并不是手机屏幕的宽度，一般默认的viewport宽度为980px，当然也有手机默认的宽度为1280px。这样如果你不把viewport的宽度设置为device-width的话，window.innerWidth就是默认值980px或者是1280px。这样我们上一段代码就有问题了。我们使用window.innerWidth获取的并不是屏幕的宽度，所以求出来的scale也就错了。

解决方法有两个，一个是加上meta那一段html代码，既设置viewport的width为device-width。推荐使用这个方法（其实现在的移动端页面都有这段代码）。第二个方法就是改用screen.width而不是使用window.innerWidth。

 

var scale = screen.width/320;

2.使用媒体查询适配

 

使用媒体查询设置html元素font-size的大小。这个方法简单但是工作量较多，一来是需要知道市场上所有主流的手机的屏幕尺寸，二来如果未来出现新的机型号到时候可能又会出现页面不适配的情况。当时这个方法确实比较简单一点，媒体查询的css如下：

html{
  font-size:62.5%;
}
@media screen and (min-360px) and (max-374px) and (orientation:portrait) {
    html { font-size: 70.3%; }
}
@media screen and (min-375px) and (max-383px) and (orientation:portrait) {
    html { font-size: 73.24%; }
}
@media screen and (min-384px) and (max-399px) and (orientation:portrait) {
    html { font-size: 75%; }
}
@media screen and (min-400px) and (max-413px) and (orientation:portrait) {
    html { font-size: 78.125%; }
}
@media screen and (min-414px) and (max-431px) and (orientation:portrait){
    html { font-size: 80.86%; }
}
@media screen and (min-432px) and (max-479px) and (orientation:portrait){
    html { font-size: 84.375%; }
}
//以下为ipad分辨率
@media screen and (min-480px)and (max-639px) and (orientation:portrait){
   html{ font-size:93.75%;}
}
@media screen and (min-640px) and (orientation:portrait){
   html{ font-size:125%;}
}

3.flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，这也是现在工作中用的最多的布局方式，因此我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配。

rem是相对长度单位，可以做到一样的取值，在不同尺寸的屏幕上的大小按比例缩放。
rem的定义：rem（font size of the root element）是相对于根元素（即html元素）font-size计算值的倍数。
例如html标签设置font-size:16px，同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=16px*1.2=19.2px。
因此这种方法的适配原理是：根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。

明白了REM的原理后，我们就可以使用这个特点来进行适应布局了，这也是现在比较主流的移动端web适配方案。

//获得屏幕大小
let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;  //浏览器兼容
console.log("屏幕宽度："+htmlwidth) //iphone5:320 iphone6:375

//获得html DOM元素
let htmlDom = document.getElementsByTagName('html')[0];

//给DOM元素设置样式
htmlDom.style.fontSize = htmlwidth/20 + 'px';  
//以iphone5为基础 iphone5默认字体大小为16px 320/16=20 即1rem字体大小是屏幕宽度的1/20