移动端一般是如何做适配的?

常用的解决移动端布局的方案大概有：

1.flex弹性布局

1）高度定死，宽度自适应，元素都采用px做单位。

2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。

2.百分比

3.用框架搭建页面

4.viewport适配

4.1 优点：

1）避免复杂的计算，直接使用UI的标准像素值

4.2 缺点：

2）不能使用meta标签 图片失真情况很严重

5.媒体查询media

6.rem+viewport缩放（也成为1px适配）

1）根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.

5.1优点：

1）media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局

2）图片便于修改，只需修改css文件

3）调整屏幕宽度的时候不用刷新页面即可响应式展示

5.2 缺点：

1）代码量比较大，维护不方便

2）为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源

3）为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

6.rem+less（sass）适配

1）viewport也是固定的

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。

2）通过代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)

3）css通过sass预编译，设置量取的px值转化rem的变量$px: (1/100)+rem;

flex布局

父级元素设置display：flex

子级元素通过flex参数来设置缩放比例，缩放条件、排列方式等

缺点：具有兼容性问题

rem布局

这里提供两种思路：

思路1

1）设置根节点字体大小为（为了方便，可以灵活设置：16、32、100等），布局时使用原px/@rem得出rem的值；

2）只需要在js中计算当前设备的clientwidth，然后用clientwidth/16（为font-size字体大小=1rem）–这里表示16rem为设备大小，即将设备看均分成1份

3）假设我们使用750px的设计稿，

举例：

  (function () {
    var styleNode = document.createElement("style");
    /* 当不除以16时此时1em便占据视口宽度,
    那么我们给其页面中的元素设置宽高基本都会小于1rem,浏览器的计算并不会特别精准容易出现偏差 */
    // var w = document.documentElement.clientWidth;
    /* 所以此时我们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */
    var w = document.documentElement.clientWidth / 16;//获取视口大小
    /* 设置此时根元素的fontsize，向html的style样式中添加font-size属性*/
    styleNode.innerHTML = "html{font-size:" + w + "px!important}";
    //向head标签中添加style标签，其中包含html{font-size:w;}
    document.head.appendChild(styleNode);
  })()

 (function () {
    var styleNode = document.createElement("style");
    /* 当不除以16时此时1em便占据视口宽度,
    那么我们给其页面中的元素设置宽高基本都会小于1rem,浏览器的计算并不会特别精准容易出现偏差 */
    // var w = document.documentElement.clientWidth;
    /* 所以此时我们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */
    var w = document.documentElement.clientWidth / 16;//获取视口大小
    /* 设置此时根元素的fontsize，向html的style样式中添加font-size属性*/
    styleNode.innerHTML = "html{font-size:" + w + "px!important}";
    //向head标签中添加style标签，其中包含html{font-size:w;}
    document.head.appendChild(styleNode);
  })()

在less文件中（这样省去了复杂的换算）

思路2：

1）设置根节点字体大小为100px(主要为了方便计算)，布局时使用原px/100得出rem值；

2）假设我们使用640px的设计稿(即iphone5，分辨率320x，dpr=2),只需要在js中计算当前设备的clientwidth,然后用100*(clientwidth/640)即可适配当前设备

代码：

(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

用框架搭建页面

1–bootstrap（基于jQuery的响应式工具，适用于移动，pad、pc）

2.–ElementUI（PC），MintUI（移动端）、vue组件库开发等

媒体查询media（就是根据你需要的几台设备进行适配。代码如下：（注意注意！！！！以下只对你进行了媒体查询设置的设备有用）-------因此有改善的方法，可以继续往下看（即rem适配）

 html{
        font-size: 100px;
    } 
     /* ip6 */
    @media screen and (min-width:375px) {
        html{/*当屏幕尺寸大于375px时*/
            font-size: 117.1875px;
        }
    }
       /* ip6p */
    @media screen and (min-width:414px) {
        html{
            font-size: 129.375px;
        }
    }
       /* ipad */
    @media screen and (min-width:768px){
        html{
            font-size: 240px;
        }
    } 

1）这里是以iphone5的屏幕分辨率320为基准，font-size设置成为100px，是为了好计算rem，因为在谷歌浏览器中字体大小是默认为16px，有着这样的运算1rem=16px，所以当你把字体大小设置成为100px的时候，此时，1rem=100px，那么在换算的时候会更加简单，只要将px除以100即可

2）那么如何通过iphone5的屏幕分辨率320以及大小100px来计算iphone6甚至ipad的字体大小呢？

3）我们知道iphone6的屏幕宽度尺寸是375，所以他对于的字体大小是（375100）/320 ，即117.1875px。同理可以算出其他设备的大小。

这里涉及的关系：

当前设备字体/当前设备宽=设计稿字体/设计稿宽

因此：当前设备字体=当前设备宽设计稿字体/设计稿宽，即（375*100）/320

实例介绍：

body设置：

<div> iphone5  </div>  

css设置：

 width: 100%;
 height: 1rem;
 background-color: red;
 font-size: 30px

再加上上面的设置，这里就不写了。

效果：在iphone5下：

在iphone6下：

可以看到div的高度有变化，变化成了117.19px，说明方法成立。

使用js进行rem适配（rem适配思路2补充）

代码：

(function (doc, win, undefined) {
            var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
              recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (clientWidth === undefined) return;
                //以ip5为基准  
                docEl.style.fontSize =(clientWidth*100) / 320 + 'px';
             };
           if (doc.addEventListener === undefined) return;
           win.addEventListener(resizeEvt, recalc, false);
           doc.addEventListener('DOMContentLoaded', recalc, false)
         })(document, window);

我们单独来看这一段代码的意思：（这里是以320为基准，一般设计稿以750、680为基准，将320换成750或者680即可）

docEl.style.fontSize =(clientWidth*100) / 320+ ‘px’;

意思就是说你当前的屏幕尺寸去乘以100，这里的100也就相当于在修改默认字体的大小，变成了100px，（所以在换算成rem的时候，用你得到的px单位再除以100即可）再除以320，就是iPhone5的屏幕尺寸。
算法同上面的，上面的理解了，这里的也就理解了。

如果你想以iphone6为基准，则只需要把屏幕大小换成iphone6的即可：
docEl.style.fontSize =(clientWidth*100) / 375+ ‘px’;

以iphone6为基准的效果图：（body以及css代码同上）

高度是1rem 所以这里是100px

在其他设备上：
在iPhone5上：高度是85.33
即（320*100）/375

在ipad上：

最后 如果根据设计稿的尺寸来写页面的话 如果是640的大小，则是以iphone5的屏幕大小来设置的，你在设置的时候 font-size就要设置成50px，因为设计稿的尺寸640是iphone5的屏幕大小320的两倍，有一个DPR的存在，是2.0。

所以给你一个设计稿，要你写页面，如果说大小是640，即以iphone5的屏幕大小来设置的，则字体大小设置成为50px；

同理，如果设计稿大小是750，即以iphone6的屏幕大小来设置的，字体大小也要设置成为50px。

但是！在换算的时候：还是用你得到的px大小除以100！

viewport适配

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 160px;
				height: 160px;
				background: deeppink;
			}
		</style>
		<!--
			ui: 320px
			320px --- 375px
			viewport适配：
				把整个设计图纸变成屏幕区域大小（屏幕真实css像素大小 = 320） == 布局视口变成320
				
				方案1： width=320 (安卓手机不支持)
				方案2：initial-scale = 375/320  --- 放大操作
		-->
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">

		//优化
		!(function(){
			//屏幕宽
			var width = document.documentElement.clientWidth; //375
			//目标宽度
			var targetW = 320;			
			//比例
			var scale = width/targetW;
			var metaNode = document.querySelector('meta[name="viewport"]')
			metaNode.setAttribute('content','initial-scale='+ scale +',user-scalable=no')			
		})();
		
	</script>
</html>

ort缩放（也成为1px适配）

使用代码1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 8rem;
				height: 8rem;
				
				border: 1px solid #000;
			}
			
		</style>
		<!--
			1px 适配  -- 物理像素
			1.布局元素 单位 rem
			2.边框 单位 px
			3.通过dpr让元素进行缩放，initial-scale=0.5
			4.布局元素 单位 rem ,反向把缩放比例乘回来  2
						
		-->
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		//获取dpr
		var dpr = window.devicePixelRatio; // 2		
		//比例              // 0.5
		var scale = 1/dpr; 
//		var width = document.documentElement.clientWidth;//375
		//3.通过dpr让元素进行缩放，initial-scale=0.5
		var metaNode = document.querySelector('meta[name="viewport"]');
		metaNode.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no')
		var width = document.documentElement.clientWidth;//750
		//4.布局元素 单位 rem ,反向把缩放比例乘回来  2
		var styleN = document.createElement('style');
//		styleN.innerHTML = 'html{font-size: '+ width/16*dpr +'px !important;}';
//		styleN.innerHTML = 'html{font-size: '+ width*dpr/16 +'px !important;}';
//		styleN.innerHTML = 'html{font-size: '+ 750/16 +'px !important;}';
		styleN.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
		document.head.appendChild(styleN);
	</script>
</html>

或者使用代码2：

!function (d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

    function e() {
      var h = a.getBoundingClientRect().width, g;
      if (b === 1) {
        h = 720
      }
      if(h>720) h = 720;//设置基准值的极限值
      g = h / 7.2;
      a.style.fontSize = g + "px"
    }

    if (b > 2) {
      b = 3
    } else {
      if (b > 1) {
        b = 2
      } else {
        b = 1
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("resize", function () {
      clearTimeout(f);
      f = setTimeout(e, 200)
    }, false);
    e()
  }(window);