初入前端

媒体查询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的书写。