modern-flexible
v1.1.0
Published
现代多设备伸缩布局方案
Downloads
222
Maintainers
hemengke-Readme
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 | 是否横屏 |
基础使用
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>配合vite插件使用（进阶）
在vite中使用，可以搭配 vite-plugin-public-typescript 使用，这样就可以在html中直接引入了
示例请参考 playground
tailwindcss
可配合 tailwindcss 实现多设备 自适应 + 响应式布局