移动端适配的那点事

目前，在实际用户使用习惯中，会有很多的用户并不会直接下载APP进行使用，而是采取移动端浏览器直接搜索。对于移动端web页面，有哪些小细节需要注意？对于五花八门的屏幕如何适配？且听下文慢慢道来。。。

移动端适配特点分析

在本人移动端开发学习中总结了一下几个特点：

1. 移动端的屏幕不大，显示的内容将远少于PC端。这就意味着布局将会变得简单。
2. 移动端为了适配不同的屏幕，一般都是通栏流式布局。而左右布局则较少。
3. 移动端一般都是最新的浏览器。

移动端的主流浏览器主要有：QQ浏览器、百度浏览器、safair浏览器、UC浏览器。 这些浏览器的内核都是webkit（或者比这个更高级的内核） ==>这就意味着我们只需要做webkit的兼容即可，不必像PC端兼容那么多的浏览器。 另外移动端浏览器对 H5 和 css3兼容很好。

像素

现在移动端的屏幕都是高清显示屏，或者称为视网膜屏（retina屏），这种屏幕会将更多的物理像素挤压到一块屏幕里。

物理像素：设备上真实的物理单元。

设备独立像素 ：屏幕上1px真实显示的大小。

设备像素比（DPR） ：物理像素和设备独立像素的比值。简单的说就是一个设备独立像素可以塞进几个物理像素。

图片失真

由于高清屏的出现，随之给页面显示带来一个问题：图片失真。为什么会出现图片失真的情况呢？举个例子：有个10px 10px的图片进行展示，你如果在高清屏中仍然将这张图片展示为10px 10px的大小，如果该屏幕是个2倍屏，那么我们实际上是以20px 20px的物理像素展示的之前10px 10px的图片。显然图片被分散到更多的物理像素点上展示，图片质量下降，图片失真。如何解决这个问题呢？且听下文分晓。

流行设计稿尺寸

目前市面上流行的设计稿主要有两种。

1. 设计稿宽度640px的。这种设计稿是以iPhone4（width320px）为基准
2. 设计稿宽度750px的。这种设计稿是以iPhone6（width375px）为基准

当然也有一些设计稿宽度大于1000px。当你使用百分比布局的时候，小于1000px的一般除以2，大于1000px的除以3。

所以，对图片失真我们的解决方案是：将图片进行压缩：

1. 当图片作为背景图时，使用background-size属性进行压缩。
2. 当作为img时：通过压缩width和height来实现。

移动端适配方案

若想适配移动端浏览器，我们还需要知道，PC端浏览器和移动端浏览器对xxx.html展示时的区别。区别在于：移动端会在页面结构外包裹一层虚拟容器----viewport，而PC端则是直接加载页面的。

那我们如何验证呢？当我们给根元素设置width：100%，在移动端展示的时候，发现页面的宽度并不是浏览器的宽度，页面出现了滚动条。显然根元素的width：100%并不是相对于浏览器的100%。

其实，现在它是相对于viewport的width：100%

viewport的特点如下：

1. viewport是移动端浏览器特有的。
2. 主流浏览器viewport默认宽度是960px。
3. 可缩放
4. 可设置宽度
5. 可设置是否允许用户缩放页面
6. 承载网页

viewport常见参数：

1. width ： 设置视口宽度
2. initial-scale ： 设置视口的默认缩放比
3. user-scalable : 设置视口是否允许用户自行缩放
4. minimum-scale : 最小运行缩放比
5. maximum-scale : 最大运行缩放比

《meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/》

百分比布局（流式布局）适配方案

这种适配方案，是将width使用百分比，而高度进行写死。具体做法就是，对宽度使用百分比布局，高度的则针对设计稿进行2倍或者3倍的压缩后写死。

缺点：这种适配方案只做到了，宽度的自适应，对于高度并做不到自适应，不同屏幕显示的内容多少是不一样的。

等比例布局（rem结合css3媒体查询）

一、rem和em的区别

相同点 ： rem和em都是相对单位。

区别 ： rem是基于根元素html的字体大小来的，而em是基于父容器的字体大小来的。

二、css3的媒体查询

响应式开发：随着不同的终端越来越多，人们针对不同终端都要开发相对应的一套页面。而响应式开发则是一套页面适配多个终端的开发方案。

现在屏幕划分 ：

超小屏也就是手机--->768px--->小屏（iPad）---> 992px---> 中屏(老式的台式电脑)--->1200px--->现在的笔记本，台式电脑

媒体查询语法 ：

@media screen and (min-width:1200px) and *** {
             // 可以写样式 （选择器）
     }
复制代码

注意 ：

1. and 后面一定有空格。
2. 可以写多个and添加多个条件。
3. 可以写多个@media形成连贯区间。
4. 符合媒体查询条件的样式会生效，将之前的样式进行覆盖。（只会覆盖重复的）
5. 媒体查询是从上到下执行的，符合条件样式就会生效，所以需要注意条件的排列顺序。

简写 ：

@media （min-width:1200px）{
         
     }
复制代码

等比例布局的核心思想就是：等比例缩放。即将设计稿定比例缩放到你屏幕可以显示的程度。

比例 ： 设计稿宽度 ： 100px = 屏幕宽度 ：X

x = 屏幕宽度 * 100 / 设计稿宽度

这里100px 是一个基准值， 写为100px的原因无非是为了方便计算。而这里得到的X将作为HTML的fon-size的属性值。

很明显这里涉及到了计算，传统的css并不能满足需求，在这里我们使用less来完成适配。当然，使用JS也可以实现，但本人推荐使用媒体查询来完成。

在全局的less文件中，代码如下 ：

//定义变量
      @psdWidth : 750 ; // 设计稿的宽度
      @baseSize : 100 ; // 基准值
      @deviceWidthList : 320px , 360px , 375px , ...., 750px ; // 所需要配置的主流设备
                                                               // 定义less数组
                                                               // 因为媒体查询条件，
                                                               // 需要从小排列到大
     .adapterFuc(@index) when (@index <= length(@deviceWidthList)){
         @media (min-width:extract(@deviceWidthList,@index)){
             html{
                 font-size : extract(@deviceWidthList,@index)/@psdWidth * @baseSize;
             }
         }
         .adapterFuc(@index + 1);
     }
     
     .adapterFuc(1);
复制代码

注释 ：

1. less 中提供length（数组）方法 获取数组的长度。
2. less 中提供extract(数组，项数)方法用来获取数组中的某一项，项数是从 1 开始的。
3. less 中没有for循环类似的遍历结构。只能通过when添加条件和自调用

移动端事件

绑定事件建议

addEventListener('事件名'，回调函数)

一、touch事件（触屏支持）

1. touchstart ： 触摸开始。手指刚刚触碰到屏幕的时候。
2. touchmove ： 手指在屏幕上滑动的时候。这是一个不断触发的事件。
3. touchend ： 触摸结束。手指离开屏幕。
4. touchcancel ： 被迫中止滑动的时候。（来电）

touch事件的回调函数，第一个参数会接受touchEvent事件对象。包含触摸的相关数据。

触摸点集合，这是一种伪数组

1. changedTouches ： 当前页面最新改变的触摸点集合。（可以全程记录）
2. targetTouches ： 当前元素上面的触摸点集合。
3. touches : 当前页面上所有触摸点的集合。

二、click事件

移动端click点击事件，并不灵敏，有300ms的延迟。这样的原因是因为，移动端需要时间判断是滑动还是点击。但是这样造成的影响是：响应过慢，用户体验下降。

解决方案 ：

1. 使用tap事件（可以理解为更快的点击事件），但是原生的JS并没有提供这一个事件，需要以touch事件为基础进行封装。但是也有一些框架已经实现了这种事件，如：zepto.
2. 使用 fastclick.js 插件。使用后可以直接使用click事件。

三、滑动事件（也是基于touch事件实现的）

小记一下本人新了解的原生事件 ：

1. transitionstart , transitionend ====> 为css3属性transition过度开始和结束的事件
2. animationstart ， animationend ====> 为动画开始和结束的事件

一些移动端容器布局

一、版心容器

.contain{
         width : 100%;
         max-width:640px;
         min-width:320px;
         margin : 0 auto;
         height : xxx
     }
复制代码

二、实现满屏效果

.contain{
         position : fixed;
         width : 100%;
         height : 100%;
     }
复制代码

原理：固定定位时，宽高相对于浏览器。

三、实现移动端左右布局

方案一 ：

页面结构如下 ：

<div class="wrap">
         <div class="left"></div>
         <div class="right"></div>
     </div>
复制代码

样式如下 ：

*{
        margin: 0;
        padding: 0;
     }
     .wrap{
        position: fixed;
        width: 100%;
        height: 100%;
        background: red;
     }
     .left{
        height: 100%;
        width: 100px;
        float: left;
        background: pink
     }
     .right{
        height: 100%;
        background: green;
        overflow: hidden;
     }
复制代码

使用的小技巧就是BFC模式。

如果不添加overflow属性的时候,.left盒子会影响.right盒子内容的显示的,这种影响并不是遮挡，而是占用了.right盒子内容显示的空间。

而使用overflow属性将.right盒子设置为绝缘容器，这种容器相当于自己是一块独立的空间，即我不影响你，那么你也别想影响我。。。

方案二 ：

页面结构如下 ：

<div class="wrap">
         <div class="left"></div>
         <div class="right"></div>
     </div>
复制代码

样式如下 ：

*{
        margin: 0;
        padding: 0;
    }
     .wrap{
        position: fixed;
        width: 100%;
        height: 100%;
        background: red;
    }
     .left{
        height: 100%;
        width: 100px;
        background: pink;
    }
     .right{
        position: absolute;
        left: 100px;
        right: 0;
        top: 0;
        bottom: 0;
        background: gray
     }
复制代码

小技巧，position绝对定位，设置四个方向的距离，会将盒模型拉开。

结束

感谢大家阅读，本文主要是本人，工作学习的总结，如有错误，欢迎指出，共同进步。