diff --git a/autofit.js/404.html b/autofit.js/404.html index 273e653..4640c88 100644 --- a/autofit.js/404.html +++ b/autofit.js/404.html @@ -16,7 +16,7 @@
- + \ No newline at end of file diff --git a/autofit.js/api.html b/autofit.js/api.html index 10a0fe1..cdbbf5a 100644 --- a/autofit.js/api.html +++ b/autofit.js/api.html @@ -12,7 +12,7 @@ - + @@ -24,7 +24,7 @@ dw: 1920, el: "body", resize: true, -});

canvas 事件热区偏移 ​

  1. 使用 ignore 参数

    js
    autofit.init({
+});

    canvas 事件热区偏移、element等弹出层位置偏移问题 ​

    canvas 热区偏移 ​

    1. 使用 ignore 参数

      js
      autofit.init({
   ignore: [
     {
       el: ".gaodeMap", //必填
@@ -43,8 +43,12 @@
 <div class="G2plot"></div>
 <div class="G2plot"></div>
      js
      onMounted(() => {
   elRectification(".G2plot");
-});

      🔴

      使用 elRectification 时，需要被矫正的元素已经挂载

    - +});

    🔴

    使用 elRectification 时，需要被矫正的元素已经挂载

element等弹出层偏移 ​

感谢 @hellorayza PR#74

使用 子串匹配属性 选择器 div[id*="el-popper-container"] 可以解决 element 弹出层偏移问题，其他组件库也是类似用法，例：

js
autofit.init({
+  ignore:['div[id*="el-popper-container"]']
+});

elRectification 同样也可以解决弹出层偏移问题，只需

js
onMounted(() => {
+  elRectification('div[id*="el-popper-container"]');
+});
+ \ No newline at end of file diff --git a/autofit.js/assets/api.md.CPPvDXoo.js b/autofit.js/assets/api.md.CPPvDXoo.js new file mode 100644 index 0000000..b636522 --- /dev/null +++ b/autofit.js/assets/api.md.CPPvDXoo.js @@ -0,0 +1,30 @@ +import{_ as i,c as a,a0 as t,o as n}from"./chunks/framework.DRtPrxkp.js";const r=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"api.md","filePath":"api.md"}'),l={name:"api.md"};function e(h,s,p,k,E,d){return n(),a("div",null,s[0]||(s[0]=[t(`

使用 ​

示例 ​

js
// 用了默认参数，等价于 autofit.init()
+autofit.init({
+  dh: 1080,
+  dw: 1920,
+  el: "body",
+  resize: true,
+});

canvas 事件热区偏移、element等弹出层位置偏移问题 ​

canvas 热区偏移 ​

  1. 使用 ignore 参数

    js
    autofit.init({
+  ignore: [
+    {
+      el: ".gaodeMap", //必填
+      height: "300px", //可选，需注明单位
+      width: "80%", //可选，需注明单位
+      scale: 1.2, //可选：回放程度，基于主元素缩放后的大小
+      fontSize: 26, //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
+    },
+    {
+      //...
+    },
+  ],
+});

    如果反向缩放后的元素大小使结构发生变化，你还可以手动传入宽高、回放程度。

    如果无需过多参数，ignore 还支持传入字符串数组：

    js
    autofit.init({
+  ignore: [".gaodeMap", ".leaflet", "#someElementClassOrId"],
+});

    🟢

    使用 ignore参数 时，无需被矫正的元素挂载

  2. 使用 elRectification 方法 ​

    一些 canvas 渲染的图表也会有事件偏移，而图表不同于地图，当使用 ignore 时，过大的图表可能会显示不全，因此可以使用 elRectification 。

    js
    import { elRectification } from "autofit.js";
    html
    <div class="G2plot"></div>
+<div class="G2plot"></div>
+<div class="G2plot"></div>
    js
    onMounted(() => {
+  elRectification(".G2plot");
+});

    🔴

    使用 elRectification 时，需要被矫正的元素已经挂载

element等弹出层偏移 ​

感谢 @hellorayza PR#74

使用 子串匹配属性 选择器 div[id*="el-popper-container"] 可以解决 element 弹出层偏移问题，其他组件库也是类似用法，例：

js
autofit.init({
+  ignore:['div[id*="el-popper-container"]']
+});

elRectification 同样也可以解决弹出层偏移问题，只需

js
onMounted(() => {
+  elRectification('div[id*="el-popper-container"]');
+});
`,13)]))}const c=i(l,[["render",e]]);export{r as __pageData,c as default}; diff --git a/autofit.js/assets/api.md.CPPvDXoo.lean.js b/autofit.js/assets/api.md.CPPvDXoo.lean.js new file mode 100644 index 0000000..b636522 --- /dev/null +++ b/autofit.js/assets/api.md.CPPvDXoo.lean.js @@ -0,0 +1,30 @@ +import{_ as i,c as a,a0 as t,o as n}from"./chunks/framework.DRtPrxkp.js";const r=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"api.md","filePath":"api.md"}'),l={name:"api.md"};function e(h,s,p,k,E,d){return n(),a("div",null,s[0]||(s[0]=[t(`

使用 ​

示例 ​

js
// 用了默认参数，等价于 autofit.init()
+autofit.init({
+  dh: 1080,
+  dw: 1920,
+  el: "body",
+  resize: true,
+});

canvas 事件热区偏移、element等弹出层位置偏移问题 ​

canvas 热区偏移 ​

  1. 使用 ignore 参数

    js
    autofit.init({
+  ignore: [
+    {
+      el: ".gaodeMap", //必填
+      height: "300px", //可选，需注明单位
+      width: "80%", //可选，需注明单位
+      scale: 1.2, //可选：回放程度，基于主元素缩放后的大小
+      fontSize: 26, //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
+    },
+    {
+      //...
+    },
+  ],
+});

    如果反向缩放后的元素大小使结构发生变化，你还可以手动传入宽高、回放程度。

    如果无需过多参数，ignore 还支持传入字符串数组：

    js
    autofit.init({
+  ignore: [".gaodeMap", ".leaflet", "#someElementClassOrId"],
+});

    🟢

    使用 ignore参数 时，无需被矫正的元素挂载

  2. 使用 elRectification 方法 ​

    一些 canvas 渲染的图表也会有事件偏移，而图表不同于地图，当使用 ignore 时，过大的图表可能会显示不全，因此可以使用 elRectification 。

    js
    import { elRectification } from "autofit.js";
    html
    <div class="G2plot"></div>
+<div class="G2plot"></div>
+<div class="G2plot"></div>
    js
    onMounted(() => {
+  elRectification(".G2plot");
+});

    🔴

    使用 elRectification 时，需要被矫正的元素已经挂载

element等弹出层偏移 ​

感谢 @hellorayza PR#74

使用 子串匹配属性 选择器 div[id*="el-popper-container"] 可以解决 element 弹出层偏移问题，其他组件库也是类似用法，例：

js
autofit.init({
+  ignore:['div[id*="el-popper-container"]']
+});

elRectification 同样也可以解决弹出层偏移问题，只需

js
onMounted(() => {
+  elRectification('div[id*="el-popper-container"]');
+});
`,13)]))}const c=i(l,[["render",e]]);export{r as __pageData,c as default}; diff --git a/autofit.js/close.html b/autofit.js/close.html index 9f2fa16..9e47267 100644 --- a/autofit.js/close.html +++ b/autofit.js/close.html @@ -19,7 +19,7 @@
autofit.js

Appearance

关闭 autofit.js 造成的影响 ​

js
autofit.off();

TIP

在你切换页面或者不需要自适应时，可以使用 autofit.off() 关闭自适应。

WARNING

当 autofit 未初始化时，会出现无法找到元素的错误，虽然没有任何使用影响，但在使用 autofit.off()前，请确保已初始化。

- + \ No newline at end of file diff --git a/autofit.js/hashmap.json b/autofit.js/hashmap.json index ce05820..3e4da4b 100644 --- a/autofit.js/hashmap.json +++ b/autofit.js/hashmap.json @@ -1 +1 @@ -{"api.md":"C3bgOZul","close.md":"CWwbuvOO","index.md":"CNdXQuPF","question.md":"CCyKSwR2","theory.md":"BdF489nA","use.md":"lOfGXIS5"} +{"api.md":"CPPvDXoo","close.md":"CWwbuvOO","index.md":"CNdXQuPF","question.md":"CCyKSwR2","theory.md":"BdF489nA","use.md":"lOfGXIS5"} diff --git a/autofit.js/index.html b/autofit.js/index.html index 763be8e..22ca887 100644 --- a/autofit.js/index.html +++ b/autofit.js/index.html @@ -19,7 +19,7 @@
autofit.js

Appearance

autofit.js

迄今为止最易用的自适应工具

大屏适配仅需一行代码

⚡ 即刻使用
了解 autofit.js 的原理
还有问题？
autofit.js

易用🚀

调用仅需一行代码，即可适配设置分辨率以下的所有屏幕，无需任何其他辅助

轻量🍀

纯js原生代码，gzip后仅有2.71KB，支持多种引入方式，且无任何第三方依赖

性能⚡

只影响一个元素样式，计算量极小，提供关闭选项和个性化参数

- + \ No newline at end of file diff --git a/autofit.js/question.html b/autofit.js/question.html index 7848daf..f53a9f2 100644 --- a/autofit.js/question.html +++ b/autofit.js/question.html @@ -19,7 +19,7 @@
autofit.js

Appearance

常见疑难解答 ​

1. 为什么我使用后有白边？

  • 检查 是否使用了 rem\em\vh\vw 等相对单位，推荐使用 px & % 作为单位

2. 为什么我的图表、地图、背景图没有撑满？

  • 建议使用 % 使其总是充满父元素，而不是使用 px 固定宽高
  • 如果使用的第三方库有 resize 事件或方法，建议尝试使用 第三方库提供的 resize

3. 需要和其他自适应库一起使用吗？

  • 不需要，也不可以，因为 autofit.js 接管的页面中，相对单位或缩放会造成冲突。

4. 为什么我使用后，第三方组件库的弹出层错位了？

  • 各大第三方组件库依旧没有做好对 transform 属性的支持，因为 transform 不会改变元素的实际位置，当其计算弹出层位置时，不会考虑元素的视觉位置，而是考虑元素的实际位置，因此会出现错位。

还有问题？ ​

欢迎来到不朽堡垒

img

🟢

群二维码过期请添加德莱厄斯

- + \ No newline at end of file diff --git a/autofit.js/theory.html b/autofit.js/theory.html index cf9c642..053e5d9 100644 --- a/autofit.js/theory.html +++ b/autofit.js/theory.html @@ -19,7 +19,7 @@
autofit.js

Appearance

​

​


​

理论上可以支持从你的设计稿以下的分辨率，只需一行代码。

autofit.js 是一个可以让你的PC项目自适应屏幕的工具，其原理非常简单，即在 scale 等比缩放的基础上，向右或向下增加了宽度或高度，以达到充满全屏的效果，使用 autofit.js 不会挤压、拉伸元素，它只是单纯的设置了容器的宽高。

- + \ No newline at end of file diff --git a/autofit.js/use.html b/autofit.js/use.html index 52e32af..be281c0 100644 --- a/autofit.js/use.html +++ b/autofit.js/use.html @@ -19,7 +19,7 @@
autofit.js

Appearance

安装 ​

shell
npm i autofit.js

引入 ​

js
import autofit from 'autofit.js'

使用 ​

js
autofit.init()
- + \ No newline at end of file