前端学习之移动端_前端移动端

含义：

    移动设备（手机，平板）
        webapp：在移动设备上的web应用（基于移动设备的浏览器）
       原生app（native app）：ios和android的应用

 使用：

          常用的：

              chrome浏览器的手机模拟器：F12开发者工具，点击手机图标，调整手机机型，显示比例，显示设备像素比，模拟网速，模拟翻转

      设备像素（css像素）
             ios：375 X667  820X1180  414X896   768X1024
             android：370X740   412X915 912X1368
      常用单位：em，rem，vw，vh
       视口：
            布局视口：跟机型无关，永远是980px
            视觉视口：跟屏幕大小有关
              布局视口和视觉视口保持一致：meta vp
          <meta name="viewport" content="width（布局视口）=device-width（视觉视口）, initial-sca
           缩放比例：initial-scale=1.0

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

      常用单位：

 常用单位：
em：（没有用）
    1em=16px--默认  自身font-size的大小
    （自身没有font-size属性，寻找父级有没有，直至查找到）
rem：（最常用）
    1rem=16px--默认  html的font-siae大小
vw，vh
  1 vw=1 viewport  width=1%视口宽度
  1 vh=1 viewport  height=1%视口高度
  vw，vh和%的区别：
  %     相对父元素，
  vw,vh 相对视口    

     移动端适配：

          含义： 在不同尺寸的屏幕下，元素大小会做出相应的调整
          rem适配：
                1 屏幕大小改变时，html的font-size随着改变
                 2 设计图测量的尺寸单位是px，实际rem：手机屏幕/设计图宽度 * 100
                      100px=1rem
                       px 和rem切换插件：px to rem

// rem适配：
    // 监听窗口改变：
    window.addEventListener('resize',function(){
        // 获取当前视口宽度：
        let vw=document.documentElement.clientWidth;
        // 获取html，并设置font-size
        // document.documentElement.style.fontSize=vw/10+'px';
        document.documentElement.style.fontSize=vw/750*100+'px';
    })
    // 缺陷：字体会过大或过小
    //   解决：给body fot-size

       flex布局（弹性盒布局）：

               pc端开发：如果需要兼容浏览器低版本，可以采用float布局，
                                  如果不需要兼容浏览器低版本，可以采用float布局
              移动端开发：采用flex布局
              弹性盒布局使用后，子盒子不能使用float，clear，vertical-align

             父级盒子属性：

display:flex   
  给父级弹性盒子，使子元素水平排列，里面的子元素为弹性项
flex-direction 主轴方向
  row（默认值）：主轴为水平方向，起点在左端。
  row-reverse：主轴为水平方向，起点在右端。
  column：主轴为垂直方向，起点在上沿。
  column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap 换行
 nowrap（默认）：不换行
 wrap：换行，第一行在上方
 wrap-reverse：换行，第一行在下方
justify-content  主轴对齐方式
   flex-start（默认值）：左对齐
   flex-end：右对齐
   center： 居中---常用
   space-between：两端对齐，项目之间的间隔都相等。----常用
   space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items 侧轴对齐方式
   flex-start：交叉轴的起点对齐。
   flex-end：交叉轴的终点对齐。
   center：交叉轴的中点对齐。
   baseline: 项目的第一行文字的基线对齐。
   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  .box{
       width:500px;
       height:200px;
       background-color:green;
       display: flex;
       flex-direction: row;
       flex-wrap:wrap;
       justify-content: center;
       align-items: center;
     }

弹性项盒子属性：

 order 排列顺序（默认0）
   flex-grow   放大比例 （默认0）
   flex-shrink 缩小比例（默认1）
   flex-basis （默认auto）
      flex-basis在弹性项不被压缩的时候有效
简写：flex：flex-grow, flex-shrink flex-basis
 align-self  单个元素对齐方式（默认auto）

swiper插件：

常用于移动端网站的内容触摸滑动（轮播图）
 1下载：
    cdn
    本地：网络，npm i swiper
 2 引入
 3 使用：
    添加内容
 
var mySwiper = new Swiper ('.swiper', {
    direction: 'horizontal', // 横向切换选项
    loop: false, // 循环模式选项
    autoplay:true,  //自动播放
    
    // 如果需要分页器
    pagination: {
    el: '.swiper-pagination',
    },
    
    })        

事件：

   手指按下：touchstart
   手指抬起：touchend
   手指移动：touchmove
   手指事件对象touchevent
    1 touches：手指所在位置
    2 target：触摸的目标
    3 targetTouches：多指触摸
    4 changedTouches  多指触摸
各种手势插件：hammer.js
 click:
   缺陷：300ms延迟问题
   解决：
     1 meta标签添加user-scalable=0------禁止缩放
     2 FastClick库
 
  let box= document.querySelector('.box');
 box.onclick=function(){
      console.log('点击');
  }
  box.addEventListener('touchstart',function(e) {
      console.log(e);
      console.log('按下');
  })

zepto框架：

移动端开发框架：zepto
 1 含义：一个轻量级的、针对现代高级浏览器的 JavaScript 工具库，它兼容 jQuery 的 API 。 如果你会用 jQuery，就已经会用 Zepto 。
 2 下载： npm i zepto
 3 模块：
    默认：zepto，event，care，ajax，form，ie

常见问题：

禁用iPhone中字号调整
禁止缩放表单
取消链接高亮
移动端点击a链接出现蓝色背景问题解决
设置HTML5元素为块

真机测试：

使用：
  1 安装node。js
  2 npm install -g browser-sync
  3
    静态网站
    browser-sync start --server --files "**/*.css, **/*.html"
    动态网站：npm run serve
      移动端开发技术：
          1 html+css+js（zepto）  多页面应用（mpa）不利于模块化管理
          ui框架：bootstrap（响应），jq22插件网
          适合场景：页面少或者页面间重复重复结构不多
          2 html+css+框架（vue cli）  单页面应用   切换快
          ui框架：vant ui   mint ui
          适合场景：几乎任何h5页面
          3 html+css+uni-app(vue为基础) 
              ui框架：uview，uni ui ，color ui
              适合场景：几乎任何h5页面，跨端
          css预处理器：（仅用于js开发模式）
          vscode------ easy sass插件
              使用：
              1 创建一个scss为结尾的文件