移动web开发

前期准备

流式布局

• 就是百分比布局，通过盒子的宽度设置成百分比，根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。容器的百分比都是相对于其直接父元素计算的。是移动web开发常用的布局方式！
• 全屏页面

    .container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    }
    /*容器设置固定定位之后，脱离标准流，宽高的百分比就是相对与浏览器窗口来算的，所以设置固定定位之后，就可以全屏*/
  

• 利用overflow:hidden制作一边固定宽，一边自适应的容器

    div:first-child {
    width: 100px;
    height: 100px;
    background-color: pink;
    float: left;
    }
    div:last-child {
    overflow: hidden;
    }
    /*利用overflow:hidden;的bfc特性，制作绝缘盒子，左边盒子左浮，右边盒子自适应*/
  

Viewport视口

• 认识viewport：viewport是仅在移动端存在的，用来盛放网页内容的虚拟容器，可以设置宽高，设置缩放比，设置是允许用户缩放。也就是我们的视觉窗口。
• 移动端适配标准
  1. 网页的宽度和浏览器（设备）的宽度保持一致
  2. 网页的缩放比1：1的缩放比
  3. 不允许用户自己缩放

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    
    <!--width:设置容器的宽度，device-width就是设备-->
    <!--user-scalable,设置是否允许用户缩放，yes/1为允许，no/0为禁止-->
    <!--initial-scale,设置视口的缩放比，标准取值1.0，取值范围0-10-->
    <!--maximum-scale=1.0，最大缩放比为1.0-->
    <!--minimum-scale=1.0,最小缩放比 为1.0-->
    <!--emmet快捷语法  meta:vp + tab-->
  

移动端事件 Touch

touch事件最初只是在苹果设备上使用的，由于移动设备的发展，导致touch虽然不是行业标准，但是移动端的支持却是非常好。

• touchstart 手指开始触摸屏幕是触发事件
• touchmove 手机在屏幕上移动时，连续触发事件
• touchend 手指离开屏幕时，触发事件
• touchcance 触摸事件被意外事件（如来电话，或弹窗）终止时触发，使用较少
  1. 触摸事件的响应顺序
  • touchstart
  • touchmove
  • touchend
  • onclick 300ms延时
  2. Touch事件的事件对象
  • 都是触摸点坐标的集合（会有多点触摸）
  • changedTouches 触发事件时，改变的触摸点在屏幕的坐标点集合
  • targetTouches 所有触摸点在绑定事件的元素上的坐标点
  • touches 所有触摸点在屏幕上的坐标点集合
  3. 坐标包含的信息
  • client 视口的坐标
  • page 页面的坐标
  • screen 屏幕的坐标
  4. tap事件
  • click在移动端的响应事件是300ms
  • tap是由前端框架或者库封装来的，响应速度比较快。
  • 由于移动设备的特殊性，click事件在移动端的响应速度是300ms，tap事件的速度比较快，所以在移动端设置点击事件，需要使用tap

进击的bootstrap

响应式开发

• 随着移动互联网的迅速发展，我们的pc端的页面已经不能满足移动设备的阅读需求，
• 通常的做法是，单独开发一个移动版的网站，但是随着由于设备类型的复杂和增多，我么需要开发一个响应式的网站，可以根据设备的不同自动适应为不同版本的页面，
• 简而言之就是开发一个页面兼容多个终端。随着移动设备的增多，新建的网站普遍采用这种方式
• 开发原理，利用css3中的媒体查询media，通过查询screen的宽度来指定某个宽度区间的网页布局
  1. 超小屏幕（移动设备） 768px以下 版心宽100%
  2. 小屏设备 768px-992px之间 版心宽750px
  3. 中屏设备 992px-1200px之间 版心宽970px
  4. 大屏设备 1200px以上 内容版心宽1170px
• media 媒体查询的使用

      /*需要查询的屏幕 加条件需要 and 中间需要空格*/
     @media screen and (min-width: 1200px){
       /*设置样式css代码*/
      }
  

  也可利用覆盖原则，使用单向覆盖媒体查询，减少代码

初识bootstrap

1. 简介

• 作者：twitte两位前端工程师，在2001年开发完成。
• 当前最流行的前端UI框架（有预制界面组件）
• 一个前端技术网站 www.awesomes.cn
• 特点：简洁，直观，强悍的前端开发框架，让web开发更迅速，更简单，
• 优点：持续更新，拥有简洁直观强悍的组件，有定义好的ui组件样式，但是自定义扩展性强，方便修改默认样式

2. 版本：
   • 2.xx 停止维护
     • 优点：兼容性好
     • 缺点：代码不够简洁，功能不够完善
   • 3.xx 目前使用最多
     • 稳定，但是放弃了IE6 IE7，对IE8支持，但是界面效果不好，偏向于开发响应式布局，移动设备优先的web项目。
   • 4.xx 测试阶段
     • 更偏向于响应式，移动设备，代码简洁
     • 不支持IE8
3. Map文件

• 通常在使用压缩版的js和css文件时，如果出错，浏览器就会提示那一行出错。Map就是记录了代码位置的文件。

入门bootstrap

1. Normalize.css
2. 响应容器
3. 栅格系统

less快速入门

安装

1. less是要基于node.js运行的，所以需要先安装node.js.

   • 查看node.js版本：node -v
   • 查看npm版本 npm -v

2. 在线安装less

   npm install -g less

3. 离线安装less

   • 路径C:\Users\对应用户名\AppData\Roaming\npm
   • 查看less版本 lessc -v

入门简介

• 简介 css是一门非程序语言，不利用复用，不方便维护及扩展，没有变量，函数，作用域等概念，less在css的语法基础上，引入了变量，运算及函数等功能，简化了css的编写降低了css的维护成本，less可以让我们用更少的代码做更多的事情。
• 原理 less包含一套语法及一个解析器，我们可以根据这些语法定义样式规则，最终会通过解析器，编译成对应的css文件。less不是来代替css的，而是在css的语法基础上，为css加入程序式语言的特性。

基础语法

1. 变量

• less允许我们自定义变量，可以在全局样式中使用，使我们修改样式更方便假单。

  //@charset "utf-8";  头部添加这段代码防止中文乱码
  //less中的注释会编译到css当中的
  //这种注释不会编译到css中，
  /*这种注释会编译到css中*/
  //定义变量
  @wjsColor:#ccc;
  //变量名必须以@开头，不能以数字开头，不能包含特殊字符
  a:hover{
    color: @wjsColor;
  }
  

2. Mixin混入

• Minxin类似js中的回调函数，把一个函数传入另一个函数内，定义函数时，在选择器后边加上括号，可以设置形参设置默认值，如果不传参数，就是使用默认值，调用的时候，在另一个选择器的样式内，传入实参即可。

  @charset "utf-8";
  
  //定义变量
  @color: red;
  
  //定义函数，不会编译到css中
  .w50(@width:50%) {
    width: @width;
    background-color: @color;
  }
  
  //定义函数,形参可以设置默认值
  .fl(@fr:left) {
    float: left;
  }
  
  /*得到宽度50%背景颜色红色左浮动的样式*/
  .w50fl {
    .w50(40px);
    .fl(right);
  }
  

使用less开发移动版苏宁站点