采用 Nodejs 为基础的 gulp 搭建前端自动化模块,并利用 bower 工具对前端库进行管理,如果从未安装过这两个工具,通过以下命令安装:
npm install -g gulpnpm install -g bower
gulp—— 项目启动gulp test—— 测试网站各 js 文件gulp build—— 项目编译,完成后在项目根目录下生成 dist 目录,内为_最终文件_
npm install && bower install(第一次clone需执行)gulp
如果是手机网站,在浏览器模拟器中,可以从地址 http://localhost:9000/进入,项目跟目录下的页面模拟了iOS safari浏览器的状态栏、地址栏和工具栏,是你能够更加清楚的知道网页在浏览器中的页面尺寸。
以 normalize 和 boostrap 的 scss 代码为基础,复制了它的 variables、和 reboot 的代码。
size(width, height)—— 方便的宽高设定,如只传一个参数,则长宽一样clearfix—— 清除浮动position(pos, argu)—— 位置设定,默认 absolute 定位,eg:@include position(absolute, top 0 right 0)absolute(argu)—— 绝对定位,position的简化版,按需传入定位参数即可,格式见上fixed(argu)—— 固定定位,同上relative(argu)—— 相对定位,同上respond-to(argu)—— 响应式断点设置,断点设置见_variables.scss
pow(number, exp)—— 乘方fact(number)—— 阶乘rad(angle)—— 角度转弧度sin(angle)—— 正弦cos(angle)—— 余弦tan(angle)—— 正切