移动web-- 04

zepto中使用tap事件

• 引入zeptojs

• 注册tap事件

  $(ulbox).on('tap',function(){})
  

移动端点透问题

点透问题其实当两个元素叠加在一起，上面的注册touchstart事件，下面的注册点击事件，当点击上面的时候，让其上面的元素隐藏，但是也间接的触发了下面的点击事件，这就是点透问题

zepto努力的解决这个问题，但是没有解决的很完美

使用fastclick解决这个问题

• 第一步引入fastclick

  <script type='application/javascript' src='/path/to/fastclick.js'></script>
  

• 如果使用js则这样初始化

  if ('addEventListener' in document) {
  	document.addEventListener('DOMContentLoaded', function() {
  		FastClick.attach(document.body);
  	}, false);
  }
  

• 如果使用jquery or zepto

  // 如果有入口函数直接FastClick.attach(document.body);放在入口函数里不要再次创建
  $(function() {
  	FastClick.attach(document.body);
  });
  

• 如何注册事件

  dom.addEventListener("click",function(){
          tap.style.visibility="hidden";
  })
  

• 没有点透问题

• 没有延迟

• 既能在移动端响应还能在pc响应

iscroll使用

• 写结构,类似下面的结构

  <div id="wrapper">
      <ul>
          <li>...</li>
          <li>...</li>
          ...
      </ul>
  </div>
  

• 引入scroll

  <script src="./js/iscroll.js"></script>
  

• js初始化

  var myScroll = new IScroll('.wrapper2',{
          mouseWheel: true,
          scrollbars: true
      });
  

swiper使用步骤

• 写结构 类名是必须一样的

• 引入swiper的样式和js

  <link rel="stylesheet" href="./dist/css/swiper.min.css">
  <script src="./dist/js/swiper.min.js"></script>
  

• js初始化

  new Swiper ('.swiper-container')
  

• 属性

  • autoplay：值毫秒数，既能设置自动轮播，也能设置轮播的时间
  • loop: 值布尔值，是否循环
  • pagination: ‘.swiper-pagination’ 设置分页器
  • autoplayDisableOnInteraction:false，用户操作完后是否禁止自动轮播
  • nextButton: ‘.swiper-button-next’：下一页
  • prevButton: ‘.swiper-button-prev’：上一页
  • scrollbar: ‘.swiper-scrollbar’：滚动条

网页布局方式

1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。

2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。

3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。

4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。

5、flex布局

注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。

响应式布局

就是通过一套代码来实现不同屏幕分辨率的终端上浏览网页的不同展示方式

a) 在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端的设备的展示和阅读

b) 之前，通常的做法是对移动端单独开发一套特定的版本

c) 但是，如果移动终端设备起来越多的时候赋发成本太大，是因为需要做所有屏幕的适配

d) 响应式开发的目的就是:一个网站能够兼容多种终端

e) 在新建的网站上一般都会使用响应式开发

f) 移动web开发和响应式开发是必须具备的技能

g) 演示响应者页面

响应式开发的原理就是媒体查询

媒体查询

媒体查询能够判断不同的屏幕设置不同的css样式

小于768 超小屏幕 （手机端）

768-992 小屏幕 （平板）

992-1200 中等屏幕 （pc端的中等屏幕）

1200以上 超大屏 （pc中的大屏）

在写媒体查询的时候 and前后必须要有空格，如果有两个条件，也用and链接

@media screen and (max-width: 768px){
	body{
		background-color: green;
	}
}
@media screen and (min-width: 768px) and (max-width: 992px){
  body{
  	background-color: blue;
  }
}

• min-width：判断最小宽，也就是要大于这个条件
• max-width：判断最大宽，也就是要小于这个条件

媒体查询书写规则

如果判断的min-width，从小到大去写

向上兼容：如果该条件为最后一个条件，那么他会无止境的把大于当前条件的屏幕全都有效

向下覆盖：后面条件的样式，会覆盖前面条件的样式

如果判断的max-width，从大到下去写

device-width：是用来判断设备的宽度，在模拟器上改变屏幕的大小是没有没问题的，但是在pc端就会有问题

link标签也可以设置媒体查询，如果符合条件，该样式就引入成功

<link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" href="b.css">

not：将条件取反

响应式框架介绍

1. bootstrap
2. Amaze ~ 妹子UI，国人开发，后起之秀！

bootstrap基本使用

• 找到起步里面的基本模板

• 第二步修改基本模板里面的路劲

  <!--[if lt IE 9]>
        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  这个条件注释代表只在ie9或以下才将里面引入的js真正引入，如果不符合条件，他就是一段真正的注释
  

  ​