Modern-flexible NPM

modern-flexible

现代多设备伸缩方案

在线示例

配置项

参数	类型	默认值	描述
rootValue	`number`	`16`	根字体大小，最好跟postcss-pxtorem中的rootValue一致
resizeOption	`object`	`{ type: 'debounce', delay: 60 }`	窗口大小改变时resize防抖或节流配置
distinctDevice	`array`	`[{ deviceWidthRange: [0, Infinity], isDevice: true, UIWidth: 375 }]`	不同设备的适配方式。 `deviceWidthRange`定义设备宽度范围（超出范围后不会再触发resize）`isDevice`用于判断当前窗口是否属于此设备`UIWidth` 定义对应的设计图宽度
landscape	`boolean`	`false`	是否横屏

基础使用

playground

main.js入口中引入

这样做有个坏处，flexible会在页面加载完毕后才执行，这样会导致页面闪烁，所以建议在html中直接引入

import { flexible } from 'modern-flexible'


flexible({
  // 以下数字只是举例
  // 具体宽度设定请自行定义
  distinctDevice: [
    { isDevice: (clientWidth: number) => clientWidth < 750, UIWidth: 375, deviceWidthRange: [300, 375] }, // 手机
    { isDevice: (clientWidth: number) => clientWidth >= 750 && clientWidth < 1280, UIWidth: 1280, deviceWidthRange: [960, 1280] }, // 平板
    { isDevice: (clientWidth: number) => clientWidth >= 1280, UIWidth: 1920, deviceWidthRange: [1280, 1920] }, // 电脑
  ],
})

html中引入

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 尽早引入flexible，避免页面闪烁 -->
  <script type="module" src="/src/flexible.ts"></script>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>