这个手机端脚手架。方便大家快速开发,快速使用。
- 集成自己常用
gulp
配置 - 集成阿里
lib-flexible
库,来方便适配 - 集成
weui
做前端ui框架 - gulp 支持 压缩js、压缩图片、压缩css、css自动补充前缀、文件合并
- gulp 支持 source map、公用文件 include
- gulp 支持直接浏览器浏览
git clone git@github.com:JHXue/es-mobile.git
#安装 npm
npm install gulp
#cd 项目根目录
npm install -D
gulp init
gulp
- rem 介绍 👉 我是链接,点我 👈
- lib-flexible 👉 我是链接,点我 👈
- npm 介绍 👉 我是链接,点我 👈
- gulp 介绍 👉 我是链接,点我 👈
- less 教程 👉 我是链接,点我 👈
- 目前是用到
lib-flexible
不支持css sprite 图。 我现在支持使用没有切过的图。小图使用 less 中data-uri
函数 - 设计稿,宽度为 750px,可以直接将设计稿的支持写到 less 文件里面
配置完成之后,在实际使用时,你只要像下面这样使用:
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
px2rem处理之后将会变成:
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}