页面兼容

     使用flexible自适应（单位换算）
        px： 逻辑像素，绝对单位
        em： 基准点为父节点字体的大小
        rem： 相对根元素字体大小来计算
         
        在样式中设定
        @function px($px, $rem: 75) {
        @return $px / $rem * 1rem;
        }
        取用时只需调用px()即可
                   
     使用媒体查询来兼容不同机型
        1.什么是媒体查询?
            通过@media来设置页面在不同屏幕大小下所显示/渲染的样式
        2.怎么用？
            首先要先知道你所做的页面需要的尺寸
            max-width / max-height 网页显示区域小于等于设置的宽度
            min-width / min-width 网页显示区域大于等于设置的宽度

            @media screen and (max-width:需要的最大尺寸) and (min-width:需要到什么尺寸为止显示这个样式) {
                  你的样式  
            }  //可以通过写多个来适配不同的机型，也可以只写两个，来适配所有

     但是总不能页面变一点动一次吧？所以还需要有个函数防抖
        1.什么是函数防抖？
            就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
        2怎么用？
            防抖有两种
            function debounce(func, wait) {
              let timeout;
              return function () {
                    let context = this;
                    let args = arguments;
              if (timeout) clearTimeout(timeout);
              timeout = setTimeout(() => {
                  func.apply(context, args)
              }, wait);
              }
            }
            这种的触发事件后不会立即执行，而是过几秒再执行，如果在等待的时间中又触发了事件会重新开始计时   

            function debounce(func,wait) {
              let timeout;
              return function () {
                    let context = this;
                    let args = arguments;

              if (timeout) clearTimeout(timeout);
              let callNow = !timeout;
              timeout = setTimeout(() => {
                  timeout = null;
              }, wait)
              if (callNow) func.apply(context, args)
              }
            }
            另一种是立即触发事件，但是会在不触发事件后几秒才出现效果