移动端总结

移动端的适配

一、Viewport视口

用法：

属性：
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宽度为4/12  -->  1/3
       // div宽度为8/12  -->  2/3



       // div宽度为6/12  -->  1/2
       // div宽度为6/12  -->  1/2

四、自适应百分比布局

用法：

.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-wrap: nowrap | wrap | wrap-reverse;
项目在一条轴上排不下时，是否换行：不换行（默认） | 换行，第一行在上面，依次往下 | 换行，第一行在下面，依次往上

flex-wrap:wrap;

flex-wrap:wrap-reverse;

flex-flow: || ;
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row(水平排列) nowrap（不换行）。

项目的属性：
order: ;
项目的排列顺序，数值越小，排列越靠前，默认为0。

flex-grow: ;
项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink: ;
项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

flex-basis: | 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)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

例：

// 基本的flex布局（平均分配空间）
// html

  ...
  ...
  ...


// css
.box {
  display: flex;
}

.item {
  flex: 1;
}

// 骰子的布局 个别示例
// html

  
  
  


// css
.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

// html

  
  
  
  
  
  


// css
.box {
  display: flex;
  flex-direction: column;   // 项目在主轴的排列方向：垂直，上到下
  flex-wrap: wrap;   // 是否换行：换行
  align-content: space-between;  // 多跟轴线的对齐方式：两端对齐，轴线之间的间隔平均分布
}

六、 rem适配

rem是CSS3新引进来的一个度量单位，相对于根节点的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单位，结合媒体查询。

** 总结 **
在项目中可以根据实际情况灵活运用以上适配方法

移动端遇到的问题

输入框获得焦点后页面放大
解决：标签禁止缩放

唤起键盘时元素的固定定位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页面中添加

移动端总结

移动端的适配

一、Viewport视口

二、 媒体查询

三、 栅格系统（布局）

四、 自适应百分比布局