移动端

怪异盒

标准盒模型的总大小=content+padding+border+margin
怪异盒模型的总大小=content+margin
使用box-sizing属性可改变盒子的类型：
box-sizing:content-box;表示标准盒模型
box-sizing:border-box;表示怪异盒模型，元素的内边距和边框将在已设定的宽度和高度内进行绘制。

弹性盒

弹性盒模型用于决定元素在盒子里的分布方式以及如何处理盒子的可用空间。
1、使用display:flex;转化为盒模型。设置flex布局之后，子元素的float、clear、vertical-align属性都将失效。
2、采用flex布局的元素，成为flex容器，他的所有子元素自动成为容器成员（容器项目）。
容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）。项目默认沿主轴排列。
3、容器的属性：flex-direction（主轴的方向）：row | row-reverse | column | column-reverse
  row（默认值）：主轴为水平方向，起点在左端。
  row-reverse：主轴为水平方向，起点在右端。
  column ：主轴为垂直方向，起点在上沿。
  column-reverse：主轴为垂直方向，起点在下沿。
4、容器的属性：justify-content（项目在主轴上的对齐方式）：flex-start | flex-end | center | space-between | space-around
  flex-start 默认值 左对齐
  flex-end 右对齐
  center居中
  space-between 两端对齐，项目之间的间隔都相等
  space-around 每个项目两侧的间隔相等。
5、容器的属性：align-items（项目在交叉轴上如何对齐）：flex-start | flex-end | center |
baseline |stretch;
6、容器的属性：flex-wrap（项目是否换行）：nowrap | wrap | wrap-reverse
7、容器的属性：align-content（定义了多根轴线的对齐方式）：flex-start | flex-end | center | space-between | space-around | stretch;
  flex-start：与交叉轴的起点对齐。
  flex-end：与交叉轴的终点对齐。
  center：与交叉轴的中点对齐。
  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  stretch（默认值）：轴线占满整个交叉轴。
8、项目的属性：align-self（单个项目与其他项目不一样的对齐方式）：auto | flex-start | flex-end | center | baseline | stretch
9、项目的属性：order（排列顺序，值越小，越靠前）默认为0
10、项目的属性：flex-grow（项目的放大比例）默认为0，即使存在剩余空间，也不放大。
11、项目的属性：flex-shrink（项目的缩小比例）默认为1，即如果空间不足，将会缩小。为0时不缩小，负值无效。
12、flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）
13、flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

媒体查询、响应式布局

可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
@media 设备类型 and (设备特征){
  div{ width:300px;height:300px;}
}
响应式布局（对应不同终端，有不同的样式改变）
集中创建页面的排版，根据用户行为或使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的布局。
通过CSS3媒体查询模块，针对设备特性（如视口宽度）设置特定的CSS样式。

1、使用媒体查询之前，首先需要在html文档中添加以下代码，用来兼容移动设备的显示效果 。

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

  width=device-width:宽度等于当前设备的宽度
  initial-scale=1：初始的缩放比例（默认为1）
  maximum-scale=1：允许用户缩放到得最大比例（默认为1）
  user-scalable=no：用户不能手动缩放

2、在css文件中写CSS相应媒体查询
@media screen and (max-width:970px) and (min-width:750px){
  body{
    background-color:red;
  }
@media screen and (max-width:750px){
  body{
    background-color:blue;
  }
}

响应式布局的优缺点：
优点：
  （1）能够面对不同分辨率设备灵活性强
  （2）能够快捷解决多设备显示适应问题
确定：
  （1）兼容各种设备工作量大，效率低下
  （2）代码累赘，会出现隐藏无用的元素，加载时间长

移动端meta标签

1、HTML5页面窗口自动调整到设备宽度并禁止用户缩放页面

<meta name="viewport" content="width=device-width, initial-scale=1.0， minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

2、忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

3、忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content=“email=no" />

4、通过快捷方式打开时全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" />

5、隐藏状态栏

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

移动端单位

1、rem
rem是相对于根元素html的font-size
1/根元素的font-size*需要转换的像素值=rem的值
2、rem+js
由rem的计算方式，可得，如果把根元素的font-size设置为100px，则设置时就简单多了，只需在设计图上量好尺寸，小数点左移两位即可。
故，通过以下js代码，设置根元素font-size的为100px

<script>           
    window.onload = function(){
		var html = document.querySelector("html");
		html.style.fontSize = html.offsetWidth / 750 * 100 + "px";
			addEventListener("resize",function(){
				   html.style.fontSize = html.offsetWidth / 750 * 100 + "px";
		},false);
	} 
</script>

3、vw
vw由视窗（Viewport）宽度大小来决定的，单位 1，代表类似于 1%。
4、vw+rem
rem+vw原理类似于rem+js，都是把html的font-size设置为100px，则设置元素的rem尺寸时，只需量好设计图的尺寸，小数点左移两位即可。
以下列出几种常用的设计图对应的vw设置：
设计图宽度为750px html{font-size:13.3333vw;}
设计图宽度为640px html{font-size:15.625vw;
设计图宽度为1080px html{font-size:9.259vw;}