为什么要学移动app ?

1 .用户需求
2.企业需求
3.It 公司解决需求
4. 用户基础大

相对于pc端的网站、

1.随时随地使用
2.用户量大  
3.浏览器的版本比较高 

相对于移动app 

1. 学习成本比较低
 2 .发布简单  不需要审核 如苹果app审核比较繁琐 
 3.用户安装简单  只需要浏览器 
 4. 一次编码 多个平台使用，而且可以通过工具 打包成不同平台的app

分辨率

逻辑分辨率 
      概念：设备的宽度*高度 单位px

设备分辨率
     概念  ： 屏幕上共有物理像素点的个数
                    图片的最小单位是指物理像素点
                    同样大小的设备 分辨率也高 越清晰

设备像素比 devicePixelRatio

对角线  一般手机的屏幕尺寸都是以对角线衡量

ppI 像素密度比  1 inch  里面拥有像素点的个数

srcset图片便签的属性  可以根据不同屏幕的清晰度加载不同的图片

失真： 
        图片的清晰度跟设备的清晰度不一致
        或者说 图片的像素点跟设备的物理像素点不一致

对于失真解决的关键代码
   设备的像素比
    srcset 图片标签的属性 

在工作中如何解决失真问题
   1 不处理 忍受模糊
   2 统一使用高清图片
    3 根据设备像素比  srcset图片标签的属性

视口
    概念 ： 在设备屏幕上所看到的网页区域

布局视口    
    概念  ： 手机厂商设置980px的视口   为了兼容旧的网站 给用户更好的体验
    出现问题：使用绝对长度单位的元素  宽度跟高度都会被缩放
                        视口的大小是980px
理想视口：
    视口和屏幕的宽度等大  并且使用绝对长度单位元素的宽度不会被缩放
    不是标准写法：

标准写法：

理想视口的参数理解
    meta: 标签用来描述设置一个HTML网页文档的属性

content要设置或者的描述内容
width 设置视口的宽度device-width等于屏幕的宽度
initial-scale 页面打开的时候视口放大的倍数

user-scalable 是否允许用户缩放页面

maximum-scale 如果允许放大的话 最大可以放大多少倍

minimum-scale 如果允许放大的话 最小可以放大多少倍

css预处理器
    有一套提高编写css代码的技术

基本css预处理器

    styles
    less
    sass

 less的执行过程

编写符合less语法的less文件
使用工具将less文件编译成css文件
页面中引用编译好的css文件

less语法
    变量 @color:red
    函数 .chang(){}    
    嵌套
    导入@import "base.css"
    注释 //这种不会编译到css中去
            /**/会被编译到css中去
    

增大背景图片的响应区域
    1.设置元素box-sizing:border-box
    2.background-origin:content-box
        background-clip:content-box
    3.动态增大padding
图片的默认3px
    display:block

在保留标签的同时 设置标签之间的间隙

1.给父元素加fontsize:0
2.再给标签单独加fontsize

图片标签浮动的时候容器出现的bug

固定定位和绝对定位

固定定位是相对于屏幕进行定位

绝对定位是现对于已经定位了的父元素进行定位

div设置固定或者绝对定位后,会导致 没有了宽度.所以 需要手动设置宽度或者由子元素撑开宽度

父元素加padding,一个子元素绝对定位 另外i一个子元素宽度加100%

尾部

如果尾部导航是用图片撑开并且 加了固定定位的话, 导致被它遮挡的高度不固定

解决:直接再加一个尾部导航的标签就可以了(不要加定位了)

触屏事件

    为什么需要触屏事件
        因为click事件不能满足多指触控事件的需求    

    概念
        手指在屏幕上所放生的一些事件

click 在移动端出现延迟

        机制：当你点击屏幕的时候 click 并不是马上触发  而是等待一段时间后  判断时候有第二次点击  如果有的话 就放大页面  如果没有就触发当前事件  
        造成的原因
            手机厂商设置的  为了用户更方便放大页面

注意: 1. 触发事件不能在pc端触发

2. 在绑定触屏事件的时候 建议使用div.addEventLister("触屏事件",function(){})  不推荐使用  div.ontouchstart() 因为一些旧版本的浏览器不支持

自己封装tap事件

1.封装手指的个数不能超过1个

2.手指按下的时间不能太长300ms

a.记录开始时间

b.end计算总时间

3.手指的滑动的距离不能太长

判断距离

封装移动端滑动事件

1.判断手指的个数不能超过1个

2.手指按下的时间不能太长 800ms

a.start记录时间

b.end 计算总时间

3.手指的滑动的距离不能太小 15px

a.判断距离

a 再判断方向

b.距离不满足条件直接return

c.start 开始坐标

d.end拿到结束坐标

e.计算距离和方向

 一些触屏事件类型

        touchstart 手指触摸到屏幕的事件    相当于 onmousedown
        touchmove 手指在屏幕上滑动触发的事件  相当于 onmusemove
        touchend 手指离开屏幕触发的事件
    相当于onmouseup

    触屏事件源的4个属性

    touches 屏幕上的所有触摸点的集合
    targetTouches 目标元素上的所哟触摸点的集合
    changeTouches 目标元素状态所发生改变（进入  移动  离开） 触摸点的集合       
    target   事件源

触摸点对象的3个对位置属性

    clientX/Y 相当于视口的坐标
    pageX/Y相对于页面的坐标      
    screenX/Y 相对于屏幕的坐标（谷歌正常/火狐跟clientX/Y一样）

响应式布局    

    是一套代码  可以页面在不同宽度设备上进行显示，让用户有更好的体验

核心原理

    媒体查询

媒体查询

    一种css的语法 ，可以在不同屏幕宽度下，加载不同的css代码

媒体查询的类型    

all 所有屏幕screen和print

screen 正常显示的屏幕

print 打印机

媒体查询的特性

width/height 宽度/高度
max-width/max-hieght 最大宽高
min-width/min-hieght、最小宽高
aspect-ratio 视口的宽高比
min-aspect-ratio 最少宽高比
max-aspect-ratio 最大宽高比

媒体查询的关键字

    or  有，好体现

    and  和

    only 只有

    not 取反

媒体查询的使用方式

1.在css中media常用
2.link中 media 当做属性
3.style中media使用  当做属性

    css 引入方式

    内嵌 @media screen and (width:800px){

      body{

        background-color: red;

      }

    行内-->

<style media="screen and (width:800px)"></style>

    外联

<link  media="screen and (width:800px)">

    媒体查询的引入方式:

      1 直接在css中写 -> 是普通的样式代码 同层级  用得最多

      2 直接在style标签中 通过属性的方式写的  一般不用

      3 在link标签中 通过属性的方式写的  一般不用

boostrap基本模板讲解

忽略。。。

栅格系统

把屏幕分为4中 分为12份  每一列占一份

4种宽度不同的屏幕

极小屏幕 xs 小于等于768px 手机设备

小屏幕 sm 768px ~992px 平板电脑

中等(普通)屏幕 md 992px~1200px - 老旧的电脑显示器

大屏 lg 大于1200px 大的电脑显示器

列偏移  col-lg-offset-3

列嵌套

列排序

 # 京东分类页面

##1.静态布局的注意细节

父元素加pdding一个子元素级绝对定位，另一个子元素的宽度和高度为100%

body并没有高度  但可以显示背景颜色 

            可以设置 body,html{

              height:100%

            }

##2.左侧的原生js实现的菜单栏的滚动条

1.手动拖拽

分析

###1 手动拖动

                    a translateY 

                    b 用到的事件 touchstart touchmove

                      touchstart

                        0 验证手指的个数

                        1 记录按下的坐标

                      touchmove

                        0 验证手指的个数

                        1 记录移动的坐标

                        2 计算距离

                        3 距离设置给ul标签

                        4 需要加上以前已经移动了的距离

                          a 如何获取  加一个touchend事件 获取离开的坐endY

                          b 获取上一次的距离  preDis=endY-startY

                          c preDis用在touchmove中

            5 用哪个触摸点数组(targetTouches和c页面hangedTouches)  都可以!

                  2 弹簧效果

                  3 点击菜单置顶效果

                ### 2、弹簧效果

                  a.自定义弹簧的高度

                  b touchmove 判断 不让ul继续往下移动

                  c touchend 判断 反弹

                      1 用preDis 和0 比较

                      2 满足条件 反弹

                        a 需要加上过渡

                        b 设置ul标签的translateY(0)

                ### 3 点击菜单置顶效果

                  a 先引用插件 绑定tap事件

                    b 获取被点击的li标签的索引

                      1 添加了自定义属性

                      2 获取被点击的li标签

                      3 通过e.target获取被点击的dom元素

                    c 向上移动的值 =索引*li标签的高度

                ### 拓展

                可以来回滚动

                kai(left_box).tap(function (e) {

                          var adom = e.target;

                          var lidom = adom.parentNode

                          var IndexLi = lidom.dataset.index;

            var middle = parseInt((document.querySelector(".container").offsetHeight) / 40) / 2;

                          //计算可视区的高度 除去li的个数取整 再除去2

                        var height = -(IndexLi - middle) * lidom.offsetHeight;//当前的索引减去中间那个

                          if (IndexLi <= middle) {  //如果索引小于中间的索引  高度为0

                                  height = 0;

                          }

                          if (IndexLi > lis.length - middle) {//当索引大于li的个数设置高度为最大高度

                              height = left_ul_Hight;

                          }

                          preValue = height;  //记录上一次的距离

                          left_box.style.transition = "transform .5s";

                          left_box.style.transform = "translateY(" + height + "px)";

                          active(IndexLi - 1)    })

##3 右侧内容滚动条

IScroll.js

父元素的第一个子元素才可以滚动

#zepto.js

特点

轻量级

模块化

语法和jq类似

偏向于移动端

内置了常见的触屏事件

#响应式布局

概念：

一套可以在不同宽度设备上运行，可以提供给客户良好的体验

核心原理

媒体查询

css的语法 

 根据设备的不同加载对应的css的代码

@media 声明一个媒体查询

其他的知识点

媒体类型：

all包含screen和print

screen带正常屏幕的设备

print打印机

媒体的特性

width-宽度

                      min-width 最少宽度

                      max-width 最大宽度

                      height 高度

                      min-height 最少高度

                      max-height 最大高度

                      aspect-ratio 视口的宽高比

                      min-aspect-ratio 最少宽高比

                      max-aspect-ratio 最大宽高比

    媒体关键字

    and

    or 逗号体现 在代码中

    not

    noly

    引入方式

        1.在css中直接写  层级一样  最常用

        2.在style标签上通过属性的方式

        3.在link标签上通过属性的方式

      注意的细节

      1.要加上理想的视口

      2 要注意空格的部分  and ()  and ()

  @media screen and(min-width:400px) and (max-width:600px){

    body{

      background-color: green;

    }

  }

#boostrap的基本模板解析

  如果使用ie浏览器访问该网站的话 默认使用最高版本的内核渲染

  但是有时候不起作用 ie自身出现了bug

  理想视口

          标准写法 

html5让ie8兼容h5的标签

respond.min.js 让ie8识别媒体查询  只能够一服务器的形式大剋 才能工作

    条件注释

    lt  less than

    ie8以及 以下的时候 会自己下载这两个文件

    其他 浏览器 忽略 不会下载

#栅格系统

栅格系统把所有的屏幕分成4种-屏幕的宽度  分为12份 每一列占一份

宽度不同的屏幕

极小屏幕 xs  小于768px 手机设备

小屏幕  sm  大于768px  小于 992px  平板电脑

中等屏幕 md  992px ~1200px  老旧的电脑显示器

大屏 lg 大于1200px的电脑显示器

container 版心宽度

container-fluid的全屏 流式  百分比

col 行

列偏移

​ col-lg-offset-1

  编写快捷

            function whatScreen() {

          var width = document.querySelector("html").offsetWidth;

              var title = document.querySelector("title");

              if (width <= 768) {

                title.innerHTML = "极小屏幕-" + width;

              } else if (width > 768 && width <= 992) {

                title.innerHTML = "小屏幕-" + width;

              } else if (width > 992 && width <= 1200) {

                title.innerHTML = "普通屏幕-" + width;

              } else if (width > 1200) {

                title.innerHTML = "大屏幕-" + width;

              }

      }

#布局

流式布局  百分比布局  自适应

代表  京东商城

##响应式布局

比如宽度要到某个范围之后页面才会发生改变

###rem+媒体查询

1. 字体大小会随着发生改变

2. 容器或者元素的大小也会发生改变

3.优惠卷

##工作中如何选择解决方案

1.从项目需求出发

2.如果是响应式    boostrap实现

还要字体大小发生改变的话  rem+媒体查询

3.基本的移动端  如果没让文字大小发生改变的需求 流式布局(百分比布局)自试应

#rem+媒体查询做屏幕适配

1.  px是绝对长度单位

2.  em 相对长度单位 相对于自身的fontsize

1.谷歌浏览器默认最小的字体12px

2.谷歌默认的字体为16px

3.  rem  相对长度单位  相对于html标签的fontsize

补充：基础值和设计稿等宽的媒体查询里面的html标签fontsize的大小  100px

公式fontsize=基础值* 要适配的屏幕的宽度/设计稿的宽度

设计稿改变之后 一样可以使用这套方案

可以用js代替媒体查询的工作 （不建议）

pc端滚动条占宽度  移动端不占宽度（建议在移动端上测试）

在线标注工具

标你妹

在线px转rem的工具

#click  和 tap  的比较 

其实在2015 年底  谷歌浏览器和safari 浏览器 检测是否有理想视口

如果有 把click 的点击延迟  取消

如果没有  click  延迟 还是存在

其他的浏览器 没有做这个设置 那么不管有没有理想视口  click还是有延迟 tap 比click  要快

火狐 就是一般浏览器的代表 

在火狐下 tap  先执行  click 后执行

2000ms  click再触发

解决方案

统一使用click  (意味忍受延迟)

2.fastclick.js  click比tap  还要快！

不需要使用整个页面的单击都是click

在页面中 有tap 只是其中一个手势事件

swipe  longtap

在工作中为最好的兼容性  还是用zepto.js

万一点透了

再加载fastclick ->把出现bug的事件  改成click 就可以了

其他地方哪个时间都可以click 或者 tap

什么是点透  如何解决

1.一般浏览器tap  比 click 要快

    等待2000ms  过后 click  在触发

click 触发的时候  触发到了a 标签

a 标签就发生了跳转行为

2 a 都使用了click  不解决(忍受)

b  使用  fastclick  click比tap  再在遮罩层 使用click 就可以看