fu-rem 1.0.0

package/README.md

@@ -0,0 +1,26 @@
+
+# fu-rem
+
+> 动态设置根字体大小的工具
+
+
+## Install
+
+```bash
+npm install fu-rem
+```
+
+## Usage
+
+```js
+import setRem from 'fu-rem';
+
+// 初始化，默认设计稿宽度为 750，根字体大小为 100px
+setRem();
+
+// 自定义设计稿宽度和根字体大小
+setRem({
+  designWidth: 750,
+  baseSize: 100
+});
+```

package/dist/index.cjs.js

@@ -0,0 +1,41 @@
+'use strict';
+
+/**
+ * 动态设置根字体大小工具
+ * @param {Object} options 配置项
+ * @param {number} options.designWidth 设计稿宽度，默认 750
+ * @param {number} options.baseSize 基准值，默认 100
+ */
+function setRem(options = {}) {
+  const designWidth = options.designWidth || 750;
+  const baseSize = options.baseSize || 100;
+  let ticking = false;
+
+  function updateRem() {
+    const scale = document.documentElement.clientWidth / designWidth;
+    document.documentElement.style.fontSize = baseSize * scale + 'px';
+    ticking = false;
+  }
+
+  function onResize() {
+    if (!ticking) {
+      window.requestAnimationFrame(updateRem);
+      ticking = true;
+    }
+  }
+
+  // 初始化
+  updateRem();
+
+  // 监听窗口变化
+  window.addEventListener('resize', onResize);
+}
+
+// 支持 CommonJS 和 ESM
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = setRem;
+} else if (typeof window !== 'undefined') {
+  window.setRem = setRem;
+}
+
+module.exports = setRem;

package/dist/index.esm.js

@@ -0,0 +1,39 @@
+/**
+ * 动态设置根字体大小工具
+ * @param {Object} options 配置项
+ * @param {number} options.designWidth 设计稿宽度，默认 750
+ * @param {number} options.baseSize 基准值，默认 100
+ */
+function setRem(options = {}) {
+  const designWidth = options.designWidth || 750;
+  const baseSize = options.baseSize || 100;
+  let ticking = false;
+
+  function updateRem() {
+    const scale = document.documentElement.clientWidth / designWidth;
+    document.documentElement.style.fontSize = baseSize * scale + 'px';
+    ticking = false;
+  }
+
+  function onResize() {
+    if (!ticking) {
+      window.requestAnimationFrame(updateRem);
+      ticking = true;
+    }
+  }
+
+  // 初始化
+  updateRem();
+
+  // 监听窗口变化
+  window.addEventListener('resize', onResize);
+}
+
+// 支持 CommonJS 和 ESM
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = setRem;
+} else if (typeof window !== 'undefined') {
+  window.setRem = setRem;
+}
+
+export { setRem as default };

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "fu-rem",
+  "version": "1.0.0",
+  "description": "动态设置根字体大小的工具",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "repository": "https://github.com/weijunfu/fu-rem.git",
+  "keywords": [
+    "rem",
+    "responsive",
+    "font-size",
+    "root",
+    "fu",
+    "ijunfu",
+    "rollup",
+    "commonjs",
+    "ESM"
+  ],
+  "author": "ijunfu",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "rollup": "^4.55.2"
+  }
+}

package/src/index.js

@@ -0,0 +1,38 @@
+/**
+ * 动态设置根字体大小工具
+ * @param {Object} options 配置项
+ * @param {number} options.designWidth 设计稿宽度，默认 750
+ * @param {number} options.baseSize 基准值，默认 100
+ */
+function setRem(options = {}) {
+  const designWidth = options.designWidth || 750;
+  const baseSize = options.baseSize || 100;
+  let ticking = false;
+
+  function updateRem() {
+    const scale = document.documentElement.clientWidth / designWidth;
+    document.documentElement.style.fontSize = baseSize * scale + 'px';
+    ticking = false;
+  }
+
+  function onResize() {
+    if (!ticking) {
+      window.requestAnimationFrame(updateRem);
+      ticking = true;
+    }
+  }
+
+  // 初始化
+  updateRem();
+
+  // 监听窗口变化
+  window.addEventListener('resize', onResize);
+}
+
+// 支持 CommonJS 和 ESM
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = setRem;
+} else if (typeof window !== 'undefined') {
+  window.setRem = setRem;
+}
+export default setRem;