移动端适配方案

1. rem适配

rem单位：根标签的font-size所代表的值
---步骤
	第一步  		创建style标签
	第二三步		将根标签的font-size置为布局视口的宽/16
	第四步  		将style标签添加到head中
---原理
	改变一个元素在不同设备上的css像素的个数
---优缺点
	优点：可以使用完美视口
	缺点：px到rem的转化特别麻烦(这已经不是问题了)

(function(){
	var styleNode = document.createElement("style");
	var w = document.documentElement.clientWidth/16;
	styleNode.innerHTML = "html{font-size:"+w+"px!important}";
	document.head.appendChild(styleNode);
})()

/*less + rem */
/* 此时我们的750为设计图大小,具体值应该跟随设计图大小来进行设置 */
/* 对于750/16rem的逻辑为:因为16rem为占据页面的总宽,所以750(设计图的宽度)/16rem得出1rem与设计图的等比 */
/* 这个适合我们就可以根据该元素在设计图的宽度来设计大小啦,例如test的宽高为200px,那么我们就可以这样来写： */
@rem:750/16rem;
#test{
    width: 200/@rem;
    height: 200/@rem;
    background: pink;
    text-align: center;
    line-height: 200/@rem;
   }

2. viewport适配

​将所有设备的布局视口的宽置为设计图的宽度 ​
第一步 定义设计图的宽度 ​
第二步 确定系统缩放比例 ​
第三步 选中viewport标签，改变其content值 ​
原理 ​改变不同设备上一个css像素跟物理像素的比例
​优缺点 ​
优点：所量即所得 ​
缺点：破坏了完美视口

html中加

<meta name="viewport" content="width=device-width"/>

js中加

/*viewport适配的原理：
			viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的*/
		/*viewport适配的优缺点：
			优点:所量即所得
			缺点:没有使用完美视口*/
		(function(){
			var targetW = 640;  //设计稿的尺寸
			var scale = document.documentElement.clientWidth/targetW;   //缩放比例
			var meta =	document.querySelector("meta[name='viewport']");
			meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
		})()

在css中,量的尺寸是多少就写多少

3. 百分比适配

​百分比参照于谁(简单的小项目可以使用)

4.流体(弹性布局 flex)+固定 (不是适配)

---

1. 基本概念

屏幕尺寸: 对角线的长度(英寸)
屏幕分辨率: 横纵向上物理像素的个数(物理像素)
屏幕密度: 每英寸上物理像素的个数
视口尺寸: 代表的横纵向上css像素的个数（css像素）

2. 4个像素 3个视口 2个操作 1个比例

4个像素：

物理像素

分辨率,是屏幕呈像的最小单位
设备出厂时,该款设备所包含的物理像素的点数和一个物理像素所占据的实际屏幕尺寸是确定的

css像素

是web开发者使用的最小单位
一个css像素最终一定会转成物理像素去屏幕上呈像
一个css像素到底占据多少个物理像素和谁有关？
(1)屏幕的特性(像素比)
(2)用户的缩放行为
不考虑用户缩放
没有viewport：
这块屏幕横向上占据了多少个css像素 （视觉视口的横向尺寸）
有viewport：
像素比
]一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个数
考虑用户缩放
在屏幕的特性的基础上：
放大：css像素占据更多的物理像素
缩小：css像素占据更少的物理像素

设备独立像素

是设备对接css像素的接口，一旦css像素与独立像素挂上勾（width=device-width）
此时像素比才能发挥真正的作用

位图像素

图片的最小单位
位图像素与物理像素一比一时，图片才能完美清晰的展示

3个视口

		布局视口
			决定页面的布局
		视觉视口
			决定用户能看到什么
				一个css像素到底占据多少个物理像素和视觉视口有极大的关系
				一个视觉视口的实际尺寸是确定的（屏幕尺寸）
				一个视觉视口包含的物理像素的个数是确定的（分辨率）
				一个视觉视口包含的css像素的个数是不确定的（用户的缩放行为有关）
		理想视口
			设备独立像素所代表的值

2个操作

		用户
			只影响视觉视口
		系统（initial-scale）
			影响布局视口和视觉视口
	
			放大
				放大一个css像素的面积,视觉视口的尺寸变小，一个css像素包含的物理像素的个数变多
			缩小
				缩小一个css像素的面积,视觉视口的尺寸变大，一个css像素包含的物理像素的个数变少

像素比

		官方定义：
			物理像素/设备独立像素
			一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个数

3. 3个意外

	1.太大的元素
		使用完美视口(有width=device-width和initial-scale=1.0)
		解决太大的元素超过视觉视口后不出滚动条的问题
	2.width和initial-scale的冲突
		谁大听谁的
	3.等比问题
		没有viewport：
			等比,页面展示太小，用户体验不好
		有viewport：
			不等比，每一个css像素在不同设备占据的实际屏幕尺寸一样。
					每一个css像素在不同设备占据的物理像素的个数不一样（像素比）。
					一个物理像素占据的实际屏幕尺寸在不同设备上是不一样的