移动端开发知识点2

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_41282726/article/details/99702587

1. 自适应布局(BFC触发)

左侧固定右侧自适应：

  .left {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }

        .right {
            height: 300px;           
            background-color: red;    
            overflow: hidden;    
            /* 当给元素设置了overflow:hidden ,此时元素会构造BFC, 触发了BFC的元素 不会和浮动元素有交集 */
        }


<div class="left"></div>
<div class="right"></div>

右侧固定左侧自适应：

 .left {
            width: 200px;
            height: 200px;
            background-color: green;
            float: right;
        }

 .right {
            height: 300px;           
            background-color: red;    
            overflow: hidden;              
            /* 当给元素设置了overflow:hidden ,此时元素会构造BFC, 触发了BFC的元素 不会和浮动元素有交集 */
        }


<div class="left"></div>
<div class="right"></div>

两侧固定中间自适应：

.left,
.right {
            width: 200px;
            height: 200px;
            background-color: green;
        }
.left {
            float: left;
        }
.right {
            float: right;
        }

.center {
            height: 300px;
            background-color: red;
            overflow: hidden; /* 触发BFC*/
        }

 <div class="left"></div>
 <div class="right"></div>
 <div class="center"></div>

2. touch事件

移动端新增了4个与手指触摸相关的事件。

//touchstart:手指放到屏幕上时触发
//touchmove:手指在屏幕上滑动式触发（会触发多次）
//touchend:手指离开屏幕时触发
//touchcancel:系统取消touch事件的时候触发,比如电话

每个触摸事件被触发后，会生成一个event对象，event对象中changedTouches会记录手指滑动的信息。

e.touches;//当前屏幕上的手指
e.targetTouches;//当前dom元素上的手指。
e.changedTouches;//触摸时发生改变的手指。

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下 :

clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY:     //触摸点相对于页面的位置

<script>
        var box = document.querySelector('.box');
        //绑定touch事件
        //定义变量记录触屏数据
        var  startX = 0; //记录手指接触时坐标值
        var  moveX = 0; //记录手指当前移动坐标值
        var  distancX = 0; //记录当前手指位置 和 起始位置差值

        box.addEventListener('touchstart', function (e) {
            console.log('start');                      
            startX = e.targetTouches[0].clientX;
            // console.log(startX); 
        })

        box.addEventListener('touchmove', function (e) {
            console.log('move');
            //触屏移动式获取当前手指移动距离
            moveX = e.targetTouches[0].clientX; 
            // console.log(moveX);
            //计算距离差值
            distancX = moveX - startX;
            // console.log(distancX);
        })

        box.addEventListener('touchend', function (e) {
            console.log('end');
            //触屏结束是判断 用户滑动方向 
            if (distancX > 0) {
                console.log('右滑动');
            }

            if(distancX < 0) {
                console.log('左滑动');
            }
             //数据重置 
             startX = 0; 
             moveX = 0; 
             distancX = 0; 
        })
</script>

在移动触屏之后，会优先触发touch事件， 在300ms之后会触发click事件，在移动点击事件会有性能问题；

优化：

      在touch事件中出去点击是逻辑， 需要判断用户的行为是点击事件才行；

      touch中判断是点击事件条件：  

触屏过程中， 手指没有在屏幕上移动；触屏的时间比较  至小>150ms

3. 关于tap事件与click事件

1）click事件在pc端非常用，但是在移动端会有300ms左右的延迟，比较影响用户的体验，300ms用于判断双击还是长按事件，只有当没有后续的的动作发生时，才会触发click事件；

2）tap事件只要轻触了，就会触发，体验更好。

/*
 * 由于移动端的点击事件click 有300左右的延迟， 用户体验有待提升
 *  希望 能用touch事件封装一个相应速度更快的 点击事件 tap
 *
 *   touch判断为点击事件的条件：
 *
 *   1、触屏开始 到触屏结束  手指没有移动
 *   2、接触屏幕的时间 小于指定的值 150ms *
 *
 *   满足以上两个条件 可以认为是点击事件触发了
 * */

/*
*  插件功能：
*   给指定的元素 绑定优化后的移动的点击事件--- tap事件
*   参数：
*   obj:要绑定优化后点击事件的元素
*   callback: 当点击事件触发 执行什么操作
* */

var itcast={
    tap:function(obj,callback){
        if(typeof obj=='object'){ //判断传入的obj是否为对象

            var startTime=0;//记录起始事件
            var isMove=false; //记录是否移动

            obj.addEventListener('touchstart',function(){
                startTime=Date.now(); //获取当前时间戳
            });

            obj.addEventListener('touchmove',function(){
               isMove=true; //记录移动

            });

            obj.addEventListener('touchend',function(e){
                //判断是否满足点击的条件
                if(!isMove&&Date.now()-startTime<150){
                    //tap点击事件触发
                    //if(callback){
                    //    callback();
                    //}
                    callback&&callback(e);
                }

                //数据重置
                isMove=false;
                startTime=0;
            });
        }
    }
}

4. zepto框架介绍

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。

github地址 (https://github.com/madrobby/zepto )

中文文档 (http://www.css88.com/doc/zeptojs_api/ )

zepto与jquery的区别

• jquery针对pc端，主要用于解决浏览器兼容性问题，zepto主要针对移动端。

• zepto比jquery轻量，文件体积更小

• zepto封装了一些移动端的手势事件

zepto的基本使用

zepto的使用与jquery基本一致，zepto是分模块的，需要某个功能，就需要引入某个zepto的文件。

<script src="zepto/zepto.js"></script>
<script src="zepto/event.js"></script>
<script src="zepto/fx.js"></script>
<script>
  $(function () {
    $(".box").addClass("demo");

    $("button").on("click", function () {
      $(".box").animate({width:500}, 1000);
    });
  });
</script>

zepto手势事件

 zepto中根据touchstart touchmove touchend封装了一些常用的手势事件

tap     // 轻触事件,用于替代移动端的click事件，因为click事件在老版本中会有300ms的延迟
	    //穿透的问题    fastclick:
swipe  //手指滑动时触发
swipeLeft    //左滑
swipeRight   //右滑
swipeUp      //上滑
swipeDown    //下滑

5. 响应式页面

什么是响应式布局？

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑、手表，电视） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

为什么要有响应式布局？

• 在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。

• 通常的做法是针对移动端单独做一套特定的版本。

• 如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）

• 响应式布局 ：一个网站能够兼容多个终端（节约开发成本）

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

响应式开发现状：

• 如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）

• 在新建站点 上采用响应式开发的越来越多。

• 在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。

响应式开发与移动web开发的比较

开发方式	移动web开发+pc开发	响应式开发
引用场景	一般已经有了PC端网站，只需要端独开发移动端网站即可	针对一些新建网站，并且要求适配移动端
开发	针对性强，开发效率高	兼容各种终端，效率低
适配	只能适配移动端或者PC端，pad上体验比较差	可以适配各种终端
效率	代码简洁，加载快	代码相对复杂，加载慢

响应式 ：一个页面，可以在任何设备上进行完美布局；
               要求网页能检测设备屏幕--> 宽高 --> 宽（最主要的就是宽）

如何动态检测当前设备屏幕宽度：
        1-可以用js动态获取 
        2-css3中新增 媒体查询技术
媒体查询技术作用： 可以动态检测当前设备宽度，根据不同设备宽度给盒子加载不同样式

6. 媒体查询

媒体查询（Media Query）是CSS提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

设备分类

分类	宽度范围
大屏设备	>1200px
中屏设备	992px~1200px
小屏设备	768px~992px
超小屏设备	< 768px

媒体查询的使用

需求：响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。

<!--
需求：
    大屏设备(>1200px)   版心：1170px   背景色：红色
    中屏设备(992-1200)  版心：970px    背景色：蓝色
    小屏设备(768-992)   版心：750px    背景色：黄色
    超小屏设备(<768px)  版心：100%     背景色：绿色
-->

媒体查询语法：

/*查询屏幕*/
@media screen and 条件 {
}

/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    background-color: red;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 970px;
    background-color: blue;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
    background-color: yellow;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    background-color: green;
  }
}

弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。

7. bootstrap框架

bootstrap中文网 (http://www.bootcss.com/ )

写原生的响应布局会很繁琐，实际工作中使用bootstrap框架 ---> 栅格系统 

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

特点：

• 组件简洁大方、代码规范精简、界面自定义性强。

• Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

• Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

优点：

• 有自己的生态圈，不断的更新迭代

• 提供了一套简洁、直观、强悍的组件

• 标准化的HTML+CSS编码规范

• 让开发更简单，提高了开发效率。

• 扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。

版本：

• 2.x.x 停止维护

  • 优点：兼容性好

  • 缺点：代码不够简洁、功能不够完善

• 3.x.x 目前使用最多

  • 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目

  • 缺点：放弃了IE67，对IE8支持但是界面效果不友好

• 4.x.x 测试阶段

基本模板

目录结构说明：

<!DOCTYPE html>
<!--使用HTML5文档，使用中文简体-->
<html lang="zh-CN">
<head>
  <!--meta1. 使用utf-8编码-->
  <meta charset="utf-8">
  <!--meta2. 当前页面在在IE浏览器访问时，使用最新的ie浏览器内核进行渲染-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--meta3. 视口设置-->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都必须跟随其后！ -->
  <title>bootstrap基本模板</title>
  
  <!--引入bootstrap的核心样式文件-->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- html5shiv是用来解决IE8以下浏览器不支持HTML5语义化标签的问题 -->
  <!--respond是用来解决IE8以下浏览器不支持媒体查询的问题，注意：respond不支持file协议打开-->
  <!--条件注释：IE浏览器专属-->
  <!--[if lt IE 9]>
  <script src="lib/html5shiv/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!--bootstrap依赖与jquery，因此需要在bootstrap之前引入jquery文件-->
<script src="lib/jquery/jquery-1.12.4.js"></script>
<!--引入bootstrap的核心js文件-->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

全局样式

normalize.css

Normalize.css是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

官网 (http://necolas.github.io/normalize.css/ )

github网址 (https://github.com/necolas/normalize.css )

normalize的特点：

• 保护有用的浏览器默认样式而不是完全去掉它们

• 一般化的样式：为大部分HTML元素提供

• 修复浏览器自身的bug并保证各浏览器的一致性

• 优化CSS可用性：用一些小技巧

Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

栅格系统

栅格系统，也叫网格系统

• .row用于抵消.container容器的15px的padding值

• 可以在.row中嵌套column

栅格系统常用类（总共12列）

类名	例子	解释
.col-xs-xx	.col-xs-6	在超小屏幕（及以上）生效
.col-sm-xx	.col-sm-6	在小屏幕（及以上）生效
.col-md-xx	.col-md-6	在中屏幕（及以上）生效
.col-lg-xx	.col-lg-3	在大屏幕及生效，占1/4
.col-lg-xx	.col-lg-4	在大屏幕及生效，占1/3
.col-lg-xx	.col-lg-6	在大屏幕及生效，占1/2

响应式栅格:

lg: 4: 4: 4
md：5： 2： 5
sm: 3: 6: 3
xs: 1: 10 : 1

<div class="row">
   <div class="col-lg-4 col-md-5 col-sm-3 col-xs-1">1</div>
   <div class="col-lg-4 col-md-2 col-sm-6 col-xs-10">2</div>
   <div class="col-lg-4 col-md-5 col-sm-3  col-xs-1">3</div>
</div>

列嵌套：

<div class="col-lg-4">
      <!--栅格系统无处不在，只要父盒子有宽度，就可以使用栅格系统-->
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>

列偏移：

<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。-->
<div class="row">
  <div class="col-lg-3"></div>
  <!--col-lg-offset-3:在大屏下，这个div将向右侧偏移3个单位-->
  <div class="col-lg-6 col-lg-offset-3"></div>
</div>

<h4>列偏移：col-*-offset-n(整体向右偏移)</h4>
<!-- 列偏移 -->
<div class="row">
      <div class="col-lg-4 col-lg-offset-4"></div>
      <div class="col-lg-2"></div>
</div>
<!-- 向左偏移 向右偏移 -->
<h4>col-xs-push-n 向右推n列  col-xs-pull-n  向左拉n列 （偏移是当前列）</h4>
<h4></h4>
<div class="row">
      <div class="col-xs-4 col-xs-push-2">1</div>
      <div class="col-xs-2 col-xs-pull-4">2</div>
</div>

响应式工具(推荐使用hidden相关的属性 )

其他

bootstrap内置的东西是在太多，不可能每一个都详细的讲，但是bootstrap文档简洁明了，当我们用到了相关的东西的时候，再来详细的查阅文档。

向css文件中引入图标字体模板：

@font-face {
  	font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

<style>
        /*将图标字体引入到页面中*/
        @font-face {
            font-family:'my-font';
            src: url('font/iconfont.eot');
            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
            url('font/iconfont.woff') format('woff'),
            url('font/iconfont.ttf') format('truetype'),
            url('font/iconfont.svg#iconfont') format('svg');
        }    
        h1 {
            font-family:'my-font';
        }
        .car::before {
            /* &#xe605; */
            content:"\e605";
            font-family:'my-font';
        }
        .pig::before {
            content: "\e66b";
            font-family:'my-font';
        }
</style>    
</head>
<body>  
    <p class="car"></p>
    <h1 class="car"></h1>
    <em class="pig"></em>
</body>

8. REM

各种布局特征的对比

由于市面上手机种类繁多，导致移动端的屏幕种类非常的混乱，比如有常见的320px 360px 375px 384px 480px 640px等。在开发中，美工一般只会提供750px或者是640px的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。

通常解决方案如下：

• 流式布局：可以让各种屏幕都适配，只是在大屏幕中显示效果不是非常的友好, 即使这样, 由于开发效率高, 成本低, 目前使用流式布局的公司还是非常多的，比如 亚马逊 、京东 、携程

• 响应式布局：国内很少有大型网站使用，主要原因是工作大，可维护性不好 。所以一般都是中小型的门户或者博客类站点会采用响应式，因为这样可以节约成本。

• rem布局：rem能够实现宽高自适应的布局方式， 目前使用rem布局的有：淘宝 、 苏宁

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。它是一个相对单位。

em（font size of the element）是指相对于当前元素的字体大小的单位。它也是一个相对单位。

html{
  font-size:16px;
}
body {
  font-size:20px;
}
div.em {
  /*em的计算方式参照的当前元素的font-size，如果不设置，默认继承自父盒子*/
  width:2em;
  height:2em;
  background-color:red;
}
/*rem的计算方式参照的是html的font-size*/
div.rem {
  width:2rem;
  height:2rem;
  background-color:blue;
}

rem与响应式

因为rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。

rem与媒体查询

使用rem配合媒体查询可以适配多个终端

 @media (min-width: 320px) {
      html {
        /*font-size: 100/750 * 320px*/
        font-size: 42.67px;
      }
    }
    @media (min-width: 375px) {
      html {
        font-size: 50px;;
      }
    }
    @media (min-width: 414px) {
      html {
        font-size: 55.2px;;
      }
    }
    @media (min-width: 480px) {
      html {
        font-size: 64px;;
      }
    }
    @media (min-width: 640px) {
      html {
        font-size: 85.33px;
      }
    }
    @media (min-width: 750px) {
      html {
        font-size: 100px;;
      }
    }

优点：使用媒体查询适配，速度快。

缺点：适配多个终端时，需要添加响应的代码。

rem与javascript

通过javascript获取可视区的宽度，计算font-size的值，也可以适配多个终端。

使用rem进行布局步骤：
基于设计布局时 设置1rem = 100px ;
1-将页面中所有单位 换算成rem
2-动态检测屏幕宽度 给改变rem的值

var base = 100;
var design = 750;

function responsive() {
  var pageWidth = window.innerWidth;

  if ( pageWidth <= 320 ) {
    pageWidth = 320;
  }

  if ( pageWidth >= 750 ) {
    pageWidth = 750;
  }

  var size = base / design * pageWidth;
  document.documentElement.style.fontSize = size + "px";
}

responsive();
window.addEventListener("resize", responsive);

优点：直接适配所有的终端

缺点：必须在页面加载之前设置html的font-size值，不然会出现文字大小调动的情况。

9. swiper插件的使用

官网： https://3.swiper.com.cn/