Decorative image frame

Cyberhan blog

vh,vh适配的方法

将视口宽度 window.innerWidth 和视口高度 window.innerHeight 等分为 100 份，且将这里的视口理解成 idealviewport 更为贴切，并不会随着 viewport 的不同设置而改变。

  • vw : 1vw 为视口宽度的 1%
  • vh : 1vh 为视口高度的 1%
  • vmin : vw 和 vh 中的较小值
  • vmax : 选取 vw 和 vh 中的较大值

如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px。其实设计稿按照设么都没多大关系，最终转化过来的都是相对单位，上面讲的 rem 也是对它的模拟。这里的比例关系也推荐不要自己换算，使用 pxtoviewport 的库就可以帮我们转换。当然每种方案都会有其弊端，这里就不展开讨论。

纯Rem适配的思路与问题

适配方案 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//移动垂直屏幕适配方案
//默认设计稿宽度为750px
//1rem=100px
var initScreen = function () {
  var designWidth = 750;
  var _w =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth ||
    window.screen.width;
  if ($("body").width() > 0) {
    $("html").css("font-size", ($("body").width() / designWidth) * 625 + "%");
  } else if (_w > 0) {
    $("html").css("font-size", (_w / designWidth) * 625 + "%");
  }
  $(window).resize(function () {
    $("html").css("font-size", ($("body").width() / designWidth) * 625 + "%");
  });
};

适配方案 2
通过对 initial-scale = 1/dpr 的设置，已将对屏幕的描述从物理像素转化到了物理像素上了，这将是后续推导的基础，且设计稿为 750px。

  1. 物理像素为 750 = 375 * 2，若屏幕等分为 10 份，那么 1rem = 75px，10rem = 750px;
  2. 物理像素为 1125 = 375 * 3，若屏幕等分为 10 份，那么 1rem = 112.5px, 10rem = 1125px;
  3. 物理像素为 1242 = 414 * 3, 若屏幕等分为 10 份，那么 1rem = 124.2px, 10rem = 1242px;

因此可推导出 rem 的设定方式：

1
2
document.documentElement.style.fontSize =
  document.documentElement.clientWidth / 10 + "px";

下面我们将 750px 下，1rem 代表的像素值用 baseFont 表示，则在 baseFont = 75 的情况下，是分成 10 等份的。因此可以将上面的公式通用话一些：

1
2
document.documentElement.style.fontSize =
  document.documentElement.clientWidth / (750 / 75) + "px";

整体设置可参考如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
(function (baseFontSize) {
  const _baseFontSize = baseFontSize || 75;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  const dpr = window.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534)) {
    // 如果非iOS, 非Android4.3以上, dpr设为1;
    dpr = 1;
  }
  const scale = 1 / dpr;
  const metaEl = document.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = document.createElement("meta");
    metaEl.setAttribute("name", "viewport");
    window.document.head.appendChild(metaEl);
  }
  metaEl.setAttribute(
    "content",
    "width=device-width,user-scalable=no,initial-scale=" +
      scale +
      ",maximum-scale=" +
      scale +
      ",minimum-scale=" +
      scale
  );

  document.documentElement.style.fontSize =
    document.documentElement.clientWidth / (750 / _baseFontSize) + "px";
})();

动态绑定的原理

https://segmentfault.com/a/1190000011294519?utm_source=tag-newest#articleHeader8
这个链接的代码，emmm 感觉可以深研究

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var oInput1 = document.getElementById("input1");
var oInput2 = document.getElementById("input2");
var oSpan = document.getElementById("span");
var obj = {};
Object.defineProperties(obj, {
  val1: {
    configurable: true,
    get: function () {
      oInput1.value = 0;
      oInput2.value = 0;
      oSpan.innerHTML = 0;
      return 0;
    },
    set: function (newValue) {
      oInput2.value = newValue;
      oSpan.innerHTML = Number(newValue) ? Number(newValue) : 0;
    },
  },
  val2: {
    configurable: true,
    get: function () {
      oInput1.value = 0;
      oInput2.value = 0;
      oSpan.innerHTML = 0;
      return 0;
    },
    set: function (newValue) {
      oInput1.value = newValue;
      oSpan.innerHTML = Number(newValue) + 1;
    },
  },
});
oInput1.value = obj.val1;
oInput1.addEventListener(
  "keyup",
  function () {
    obj.val1 = oInput1.value;
  },
  false
);
oInput2.addEventListener(
  "keyup",
  function () {
    obj.val2 = oInput2.value;
  },
  false
);

取代$ajax的方式

原生

1
2
3
4
5
6
fetch(url)
  .then((response) => response.json())

  .then((data) => console.log(data))

  .catch((e) => console.log("Oops, error", e));

兼容的话就是用 xmlhttprequest 实现 promise 方法，GitHub 有这个，自己也可以简化。

取代选择器$()的方式 

1
2
3
4
5
6
7
8
9
10
11
12
13
function $(elem) {
  let list = document.querySelectorAll(elem);

  return list;
}

let a = $(".odiv")[0];

a.style.width = "100px";

a.style.height = "100px";

a.style.background = "#000";