HTMLApp

1.适配相关

1. rem 适配   （同一元素，在不同设备上，效果一样，根标签的font-size）

• 原理： 让 css 面积减小，initial-scale = 0.5，布局视口变大
• 需要解决的问题是，元素的 width margin 这样的布局 px 变小了？
  • 解决： 使用 rem 适配 乘回来就好了

• 原理：改变了一个元素在不同设备上占据css像素的个数

步骤：

1.  创建style标签
2.  将根标签的font-size置为布局视口的宽/16
3.   将style标签添加到head中

 (function () {
        var styleNode = document.createElement('style')//创建一个style标签
        var w = document.documentElement.clientWidth / 16
        styleNode.innerHTML = 'html{font-size:' + w + 'px!important}';
        document.head.appendChild(styleNode)
    })()

2. viewport 适配：将所有布局视口的宽度调整为设计图的宽度

• 原理： viewport适配方案中，每一个元素再不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，是等比的。
• 优点：简单，所量即所得
• 缺点：没有使用完美视口

步骤：

1.    将所有设备的布局视口的宽置为设计图的宽度
2.    定义设计图的宽度
3.    确定系统缩放比例
4.    选中viewport标签，改变其content值

    (function () {
        var targetW = 640;
        var scale = document.documentElement.clientWidth / targetW;
        var meta = document.querySelector("meta[name='viewport']");
        meta.content = "initial-scale=" + scale + 
        ",mininum-scale=" + scale + 
        ",maxinum-scale=" + scale + 
        ",user-scalable=no"
    })

3.一 物理像素 

• 需求： border: 1px solid red; 在移动端 dpr 为 2 的屏幕上，实际上是 2 物理像素。    如何实现 1 物理像素？

首先，肯定不能 border: 0.5px solid red;

因为 有些 PC 不支持小数 px，或者浏览器会将小数 px 取整，即变成 1px

• rem+系统缩放

            1.主体适配采用rem适配 并放大rem的基值(dpr倍)

            2.再通过系统缩放缩回dpr倍，initial-scale=1/dpr

 (function () {
            var dpr = window.devicePixelRatio || 1;//获取像素比

            var styleNode = document.createElement('style');
            var w = document.documentElement.clientWidth * dpr / 16;
            styleNode.innerHTML = 'html{font-size:' + w + 'px!important}';
            document.head.appendChild(styleNode)

            var scale = 1 / dpr;
            var meta = document.querySelector("meta[name='viewport']");
            meta.content = "width=decive-width,initial-scal=" + scale;

 })()

• 响应式+变换缩放

    <style>
        #test {
            width: 100%;
            height: 1px;
            margin-top: 50px;
            background-color: black;
        }

        @media only screen and(-webkit-device-pixel-ratio:2) {
            #test {
                transform: scaleY(0.5);
            }
        }

        @media only screen and(-webkit-device-pixel-ratio:3) {
            #test {
                transform: scaleY(0.333333333);
            }
        }
    </style>

2.轮播图_transform 版本 

•  无缝：复制一组图片，当点击第一组第一张时瞬间跳到第二组的第一张；当点击第二组最后一张时瞬间跳到第一组的最后一张。设置ul的一个translateX属性来实现

• 自动滑屏：循环定时器，函数包裹（重启定时器），清定时器（循环定时器的逻辑没有必要同一时刻开启多次;暂停逻辑）

•    //自动轮播 
  function auto() {
      clearInterval(timer);
      timer = setInterval(function () {
          //无缝
          if (index == 1 - arr.length) {
              ulNode.style.transition = 'none';
              index = 1 - arr.length / 2;
              damu.css(ulNode, 'translateX', index * document.documentElement.clientWidth);
          }
  
          setTimeout(() => {
              index--;
              ulNode.style.transition = '1s transform';
              xiaoyuandian(index);
              damu.css(ulNode, 'translateX', index * document.documentElement.clientWidth);
          }, 50);
  
       }, 1000)
  }

  3.内容区防抖

防抖动

    isX

    isFirst

•     判断用户的首次操作

        如果是x轴滑屏，不管用户以后怎么操作，滑屏逻辑永远都会被触发

        如果是y轴滑屏，不管用户以后怎么操作，滑屏逻辑永远都不会被触发

       

•         怎么防止首次抖动

            1.确定了用户首次操作的方向

                isFirst加入逻辑就变为false。直达下一次touchstart置回

                如果是y   return

•         怎么防止后续抖动

            在touchmove一上来时，就对用户首次操的方向进行判断

                如果是y   return