媒体查询、px和rem转换、浏览器兼容、手机端视频播放解决方案

媒体查询

• 响应式的界面不局限于某一固定分辨率。所以如何在不同的尺寸的设备上很好地展示界面，是一个很大的问题。
  为了更好的适配设备，我们按照不同的分辨率对设备进行了划分。

在这里插入代码片/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) { ... }

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) { ... }

/* 超小屏幕（手机，小于 768px） */
media (max-width: 767px) { ... }

布局

• 尽量采用flex布局，自适应宽高。

单位（px -> rem）

• 因为px是相对长度单位，所以使用px为单位的话，PC端正常显示的布局，在移动端大小和间距会显得特别大。
  rem是是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
  所以我们通过判断当前设备的分辨率计算出一个合适的"根元素"大小。

@media only screen and (min-width: 320px){
    html {
        font-size: 62.5% !important;
    }
}
@media only screen and (min-width: 640px){
    html {
        font-size: 125% !important;
    }
}
@media only screen and (min-width: 750px){
    html {
        font-size: 150% !important;
    }
}
@media only screen and (min-width: 1242px){
    html {
        font-size: 187.5% !important;
    }
}

浏览器兼容

• 常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit

  • Chrome浏览器：Webkit内核，现在是Blink内核
  • Firefox浏览器：Gecko内核，俗称Firefox内核
  • Safari浏览器：Webkit内核
  • Opera浏览器：Blink内核
  • 360浏览器：IE+Chrome双内核
  • 猎豹浏览器：IE+Chrome双内核
  • 百度浏览器：IE内核
  • QQ浏览器：Trident（兼容模式）+Webkit（高速模式）

• css方面一般在私有属性前面加对应的前缀

  • -moz代表firefox浏览器私有属性
  • -ms代表IE浏览器私有属性
  • -webkit代表chrome、safari私有属性
  • -o代表opera私有属性

• js方面遇到问题

  • 语法问题

// Safari和IE下会有兼容问题
window.onload = funcRef;
// DOM的事件绑定不会有兼容问题
window.addEventListener('resize', function () {
   ...
})

// Safari和IE下会有兼容问题
video.onplay = funcRef;
// DOM的事件绑定不会有兼容问题
video.addEventListener('play', function () {
   ...
})

// IE下通过``拼接字符串会报错
const a = 'a';
const ab = `${a}b`;
// 兼容方法 用连接符代理``
const abc = a + 'bc'

手机端视频播放解决方案

• 由于<video>标签在安卓手机上无法屏蔽系统自带的播放控件且，需求方要求必须在移动端使用视频效果。

  • 方案1.0: PC端使用video为背景，移动端使用切图+css动画展示
    pass原因：动效太弱没有，粒子聚合效果

  • 方案2.0：ios系统使用视频背景，安卓继续使用css动画
    pass原因：安卓动效太弱，ios微信浏览器打开不能自动播放

  • 方案3.0：将动效视频切图，手机端加载每一帧高清大图轮播切换模拟视频动效
    轮播实现大致如下：

const activeImg = document.getElementById('active-img');
const imgGroups = [];

for (let i = 0; i < 268; i++) {
  const img = new Image();
  let fileName = '';
  if (i < 10) {
      fileName = 'notice-bg00' + i + '.png';
  } else if (i >= 10 && i < 100) {
      fileName = 'notice-bg0' + i + '.png';
  } else if (i >= 100) {
      fileName = 'notice-bg' + i + '.png';
  }
  img.src = './static/vimgs-min/' + fileName;
  img.onload = function () {
      imgGroups.push({src: img.src, index: i});
      if(i === 0) {
          activeImg.src = img.src;
      }
      if (imgGroups.length === 268) {
          const newGroups = imgGroups.sort(compare('index'))
          transform(newGroups);
      }
  }
}

// 排序  防止图片顺序错误
function compare(prop) {
  return function (obj1, obj2) {
      const val1 = obj1[prop];
      const val2 = obj2[prop];if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
  }
}
let timer = null;

// 开始轮播
function transform(imgGroups) {
  clearTimeout(timer);
  let i = 1;
  const max = imgGroups.length;
  function draw() {
    if (i < max) {
      activeImg.src = imgGroups[i].src;
      i++;
      timer = setTimeout(draw, 20);
    } else {
      clearTimeout(timer);
      i = 0;
      transform(imgGroups);
    }
  }
  draw();
}