移动端的适配
一、Viewport视口
用法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
属性：
width: 控制Viewport的大小，device-width是屏幕的宽度
initial-scale: 初始缩放比例，用户第一次打开页面的显示比例
maximum-scale: 允许用户缩放的最大比例
minimum-scale: 允许用户缩放的最小比例
user-scalable: 用户是否可以手动缩放，默认值yes
二、 媒体查询
@media 可以针对不同的屏幕尺寸设置不同的样式，当浏览器大小重置的时候，页面会根据浏览器的高度和宽度重新渲染页面
语法：
@media (min-width: 768px){
// >=768的设备
}
@media (min-width: 992px){
//>=992的设备
}
@media (min-width: 1200){
//>=1200的设备
}
三、 栅格系统（布局）
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
语法：
.col-xs-num // 超小屏幕（手机，小于 768px）
.col-sm-num // 小屏幕（平板，大于等于 768px）
.col-md-num // 中等屏幕（桌面显示器，大于等于 992px）
.col-lg-num // 大屏幕（大桌面显示器，大于等于 1200px）
用法：
<div class="row">
<div class="col-md-4"></div> // div宽度为4/12 --> 1/3
<div class="col-md-8"></div> // div宽度为8/12 --> 2/3
</div>
<div class="row">
<div class="col-md-6"></div> // div宽度为6/12 --> 1/2
<div class="col-md-6"></div> // div宽度为6/12 --> 1/2
</div>
四、 自适应百分比布局
用法：
.left { width: 30%; }
.right { width: 70%; }
需要注意：
- 元素的百分比是针对父元素，而不是浏览器的宽度
- 设置width最好结合box-sizing: border-box使用，否则盒子会被内外边距撑大
- 百分比布局在很多情况下会将元素拉的很宽（高度不变），所以不推荐大范围使用
五、 flex弹性布局
申明：本部分来源自
阮一峰http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
使用：
父盒子的属性：
.div {
display: flex; // 给父盒子设置flex布局
}
其它属性：
flex-direction: row | row-reverse | column | column-reverse;
项目在主轴的排列方向： 水平（默认），左到右 | 水平，右到左 | 垂直，上到下 | 垂直，下到上
flex-wrap: nowrap | wrap | wrap-reverse;
项目在一条轴上排不下时，是否换行：不换行（默认） | 换行，第一行在上面，依次往下 | 换行，第一行在下面，依次往上
flex-flow: <flex-direction> || <flex-wrap>;
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row(水平排列) nowrap（不换行）。
justify-content: flex-start | flex-end | center | space-between | space-around;
项目在水平主轴上的对齐方式：左对齐（默认） | 右对齐 | 居中 | 两端对齐，项目之间的间隔都相等 | 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items: flex-start | flex-end | center | baseline | stretch;
项目在垂直主轴上的对齐方式： 垂直轴起点对齐（顶部对齐） | 终点对齐（底部对齐）| 中点对齐 | 项目的第一行文字的基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度（默认）
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
多根轴线的对齐方式（项目有多行的情况下生效）：起点对齐 | 终点对齐 | 中点对齐 | 两端对齐，轴线之间的间隔平均分布 | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 | 轴线高度占满整个交叉轴（默认）
项目的属性：
order: <integer>;
项目的排列顺序，数值越小，排列越靠前，默认为0。
flex-grow: <number>;
项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink: <number>;
项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
flex-basis: <length> | auto;
项目在主轴上占据的空间，默认值为auto，默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex属性是flex-grow（放大比例）, flex-shrink（缩小比例） 和 flex-basis（剩余空间）的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
align-self属性允许单个项目有与其他项目不一样的对齐方式（垂直主轴），可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
例：
// 基本的flex布局（平均分配空间）
// html
<div class="box">
<span class="item">...</span>
<span class="item">...</span>
<span class="item">...</span>
</div>
// css
.box {
display: flex;
}
.item {
flex: 1;
}
// 骰子的布局 个别示例
// html
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
// css
.box {
display: flex;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
// html
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
// css
.box {
display: flex;
flex-direction: column; // 项目在主轴的排列方向：垂直，上到下
flex-wrap: wrap; // 是否换行：换行
align-content: space-between; // 多跟轴线的对齐方式：两端对齐，轴线之间的间隔平均分布
}
六、 rem适配
rem是CSS3新引进来的一个度量单位，相对于根节点<html>的font-size，根节点的font-size改变了，rem元素的大小也会相对应改变。所以我们只要写一份css就可以适配所有手机的屏幕。兼容情况：主流浏览器
使用：
html{
font-size:20px;
}
div {
width: 6rem;
height: 3rem;
}
div的宽 = 6*20 = 120px
html{
font-size:30px;
}
div {
width: 6rem;
height: 3rem;
}
div的宽 = 6*30 = 180px
怎么改变不同分辨率下font-size的值：
- 媒体查询
html {
font-size : 20px; // 初始值
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
- JS动态计算
function tryResize(){
var docEl=document.documentElement;
var clientHeight = docEl.clientWidth;
if(!clientHeight)
{
return
}
docEl.style.fontSize=20*(clientHeight/375)+"px"
}
tryResize();
window.onresize=tryResize;
计算规则：
例如设计稿是375的尺寸，375页面的font-size是20px，那么320的页面呢？320/375 = 0.8533 320是375的0.8533倍，所以320的font-size等于20*0.8533 = 17.0667。
注意：文本的字号使用rem会出现小屏字体太小，大屏字体太大的情况，建议文本字号使用px单位，结合媒体查询。
** 总结 **
在项目中可以根据实际情况灵活运用以上适配方法
移动端遇到的问题
- 输入框获得焦点后页面放大
解决：<meta>标签禁止缩放
- 唤起键盘时元素的固定定位position: fixed会出现样式问题（被键盘挤上去）
解决：
a. 可用iScroll插件解决这个问题
b. 唤起键盘时使元素静态定位，取消键盘后恢复固定定位
var windheight = $(window).height(); /*未唤起键盘时当前窗口高度*/
$(window).resize(function(){
var docheight = $(window).height(); /*唤起键盘时当前窗口高度*/
if(docheight < windheight){ /*当唤起键盘高度小于未唤起键盘高度时执行*/
$(".submit").css("position","static");
}else{
$(".submit").css("position","fixed");
}
});
- 移动端点透问题
点透出现的场景：
a. A/B两个层上下z轴重叠。
b. 上层的A点击后消失或移开。（这一点很重要）
c. B元素本身有默认click事件（如a标签） 或 B绑定了click事件。
在以上情况下，点击A/B重叠的部分，就会出现点透的现象。
点透发生的原因：
click的延迟。当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了.
解决方案：
a. 对于B元素本身没有默认click事件的情况（无a标签等），应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件。
b. 对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件，从而阻止click事件的触发。
A.addEventListener('touchend', function(e) {
e.preventDefault(); // 取消默认事件
});
c. 使用现有的框架（库）
zepto/fastclick/hammer
其中最常用的是fastclick
- 移动端click延迟
300ms延迟的产生缘由：
为了对早期普通网页更好的体验，iphone设计了双击放大显示的功能--这就是300ms延迟的来源：如果用户一次点击后300ms内没有其他操作，则认为是个单击行为；否则为双击放大行为。
解决方案：
a. 设置不能缩放，没有双击缩放就没有 300 毫秒点击延迟
b. fastclick
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到 touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的 click事件阻止掉。
使用：
①在HTML页面中添加
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js">
②在JS中实例化fastclick
原生js:
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function(){
FastClick.attach(document.body);
}, false);
}
jquery:
$(function() {
FastClick.attach(document.body);
});
Browserify或者其他CommonJS-style系统:
var attachFastClick = require('fastclick');
attachFastClick(document.body);
- 一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发
解决： 给元素增加cursor:pointer样式
- 页面滑动卡顿
解决：
a. body元素增加-webkit-overflow-scrolling: touch;样式
b. 非body元素-webkit-overflow-scrolling: touch; overflow-y: scroll;
c. 当一个元素设置过position: absolute|relative，后再增加-webkit-overflow-scrolling: touch;属性后，会发现，滑动几次后就滚动区域会卡住，不能在滑动，这时给元素增加个z-index值：
webkit-overflow-scrolling: touch; // 控制元素在移动设备上是否使用滚动回弹效果：当手指从触摸屏上移开，会保持一段时间的滚动
position:absolute;
z-index:1;
