2017.2.5

初入前端

• 媒体查询
• bootstrap栅格
• less学习
• hbuilder的安装及配置
• gulp的简单了解及使用

---

媒体查询

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

简单的媒体查询代码如上，media关键字。 screen存在并且宽度不大于300px时执行以下css样式。

bootstrap

bootstrap是一个前端库。里面有丰富的css样式，并对外提供类名。可以调用实现自己想要的效果。

less

less简化了css的书写，平时写代码更加高效，易懂，便于修改。

@bgc:red;
//定义变量bgc，便于修改。
body{
    background-color:@bgc;
    div{
        background-color:blue;
        }
    }
//多层css嵌套，方便阅读。

开发工具hbuilder

详见。。。

初识gulp

在安装好nodejs的环境下，即可下载使用gulp。
安装步骤如下

npm install

执行完之后执行

npm install gulp -g

最后在自己的目录下打开gulp即可使用。
gulp的存在，大大方便了日常开发。省去了部署环境等。
下载各种库好累的。
以后在了解一下gulp的使用，gulpfile的书写。