https://github.com/ydj-fe/mtb-flexible
仿手淘的h5适配方案，采用rem适配，页面设计稿分10等分
https://github.com/ydj-fe/mtb-flexible
Last synced: about 2 months ago
JSON representation
仿手淘的h5适配方案，采用rem适配，页面设计稿分10等分
- Host: GitHub
- URL: https://github.com/ydj-fe/mtb-flexible
- Owner: YDJ-FE
- Created: 2017-11-21T06:30:52.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-21T06:56:32.000Z (almost 8 years ago)
- Last Synced: 2025-04-05T21:37:01.143Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 40 KB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MTB-FLEXIBLE
模仿手淘rem移动端自适应方案
根据m.taobao.com的移动端rem自适应方案， 将页面宽度分为10等分， `1rem = html.style.fontSize = pageWidth / 10`
## USAGE:
下载对应版本的flexible.js到您的项目中
[https://github.com/YDJ-FE/mtb-flexible/releases](https://github.com/YDJ-FE/mtb-flexible/releases)
在html的`head`标签， 添加script引用
```html
```
然后页面会自动添加移动端的meta标签,声明`viewport`属性(默认开启高清方案， 无需手动声明viewport)
并且自动设置html的一些必要属性,例如`data-dpr`,`font-size`等等
例如：
```html
```
脚本运行成功后， 会产生对象： `window.lib.flexible`
自行查看window.lib.flexible中提供的属性和方法
## PS:
脚本默认开启高清dpr方案， 例如在iphone6高清屏上， `dpr`会设置为2， `initial-scale`, `minimum-scale`, `maximum-scale`都会变成0.5， 那么对应页宽是`750px`, 这种情况下无法使用大部分移动端UI框架（px布局），
如果需要兼容使用UI框架，需要添加以下标签到`head`标签里面
```html
```
或者，强制声明`viewport`
```html
```
样式处理：
- `less` 和 `scss` 可以自己编写function进行换算， 也可以通过`postcss`后续处理
- `css` 自己通过编辑器插件工具换算活着通过 `postcss` 处理
- postcss插件： [https://github.com/cuth/postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)
## 开发说明：
### npm scripts
- npm run build
开发构建， 自动监听变化
- npm run qn
部署cdn