https://github.com/gavinbirkhoff/flex-grid
Build flexible page on mobile or pc platform
https://github.com/gavinbirkhoff/flex-grid
Last synced: about 1 year ago
JSON representation
Build flexible page on mobile or pc platform
- Host: GitHub
- URL: https://github.com/gavinbirkhoff/flex-grid
- Owner: GavinBirkhoff
- Created: 2019-11-06T06:07:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-09-06T05:48:21.000Z (over 2 years ago)
- Last Synced: 2025-03-11T21:37:28.349Z (about 1 year ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# flex-grid
Deprecated
Build flexible page on mobile or pc platform
## Usage
### Install
`npm i -S @gavinbirkhoff/flex-grid`
`import {flexViewport} from '@gavinbirkhoff/flex-grid'`
flexViewport is a function<{pcWidth,unit}>
flexViewport() // Always transition unit default 10
or flexViewport({pcWidth:640, unit:5}) // Always transition, Stop at 640, 640 is PC.
unit is cutting design cell
then rem equal unit，Css unit written as rem
flexViewport这个函数调用，启动移动和PC设备页面自适应，不穿参数认为一直自适应，1rem等于design的1/10。
如果传参数pcWidth表示PC的独立像素宽度，到这个宽度后不在继续自适应，保持临界点状态。unit表示分割的design grid。
为了动态决定是否适配，所以函数设置了手动调用。
### Import
Manually remove first 'export' in ./node_modules/@gavinbirkhoff/flex-grid/src/index.js
```html
flexViewport() // Always transition unit default 10
or flexViewport({pcWidth:640, unit:5}) // Always transition, Stop at 640, 640 is PC.
```