回到命令行 .. 刚才我们运行了 gulp serve 以后，给我们创建了一个本地服务器，打开了项目里的页面。

这里还会显示一个外部地址，我这里是 192.168.31.x .. 也就是你可以在同一个网络里面的其它的设备上，使用这个地址外加具体的端口号，访问到我们的项目 ...

这个服务器是用 browser sync 创建的 .. 编辑项目里的一些特定的文件，保存以后，浏览器会自动刷新出修改之后的结果。

我们可以试一下 .. 这里已经在浏览器上打开了项目的本地服务器。 我的手机跟我的电脑在同一个网络里，也就是它们用的是同一台路由器上网。

在我的手机上，打开浏览器 ... 访问一下项目服务器的外部的地址，就是这个 192.168.x.x:33xx

然后在回到编辑器 ... 打开项目下面的 app 目录下的 index.html ...

这是一个 html 文档的样板，里面已经链接了项目需要的一些样式表还有脚本文件 ..

在这组 body 标签的里面，输入一组 h1 标签 ，表示大标题，如果你想使用这种缩写的形式输入 html 与 css ，可以在编辑器上安装一下 emmet 插件。

再给大标题输入一个具体的文字 ...

保存一下这个文件 .. 你会发现本地电脑的浏览器，还有手机上的浏览器上，都会显示出我编辑之后的结果。

再打开 styles 下面的 main.css ，在 index.html 这个文档里，已经链接使用了这个样式表 .. 而且我配置了为项目创建的这个本地服务器，也会监视这个文件的变化 .. 当发生变化以后，也会去刷新浏览器 ..

比如我们为 h1 这种元素去添加点样式 .. 用一下 font-size 设置一下字号 .. 保存 ..

在浏览器上显示的这个大标题的样式会发生变化，因为它现在用到了我给它设计的样式 ..

再回到 index.html .. 在这个标题的下面，我们再添加一个文本框 .. 就是一个 text 类型的 input 元素。

这里可以直接给它添加点样式 .. style="width: 90%; height: 30px; font-size: 18px"

保存 ... 浏览器上会显示一个文本框 ..

我们可以在一个浏览器上的这个文本框里输入点文字 ... 你会发现，在其它打开了这个项目的浏览器上也会实时的显示我在文本框里输入的内容 ...

可以在这个手机浏览器上再试一下 ... 在文本框里输入点文字 ... 在电脑的浏览器上也会反应出我在手机浏览器上的一些行为。