2.5 案例：使用HBuilder框架设计精美窗体

利用前面所学的知识，制作一个手机版的页面。

要制作一个移动版本的页面，先要解决一下屏幕宽度和内容缩放的问题，在这里要用到<meta>标签。

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">，下面解释一下各个属性的定义。

● name="viewport"：对窗口的设定。

● width=device-width：应用程序的宽度和屏幕的宽度是一样的。

● height=device-height：应用程序的高度和屏幕的高度是一样的。

● initial-scale=1.0：应用程序启动时的缩放尺度（1.0表示不缩放）。

● minimum-scale=1.0：用户可以缩放到的最小尺度。

● maximum-scale=1.0：用户可以缩放到的最大尺度。

● user-scalable=no：用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生改变（yes/no）。

rem是相对长度单位，62.5% 相当于100px。

调试工具用Chrome浏览器。

1. 创建项目

启动HBuilder，选择“文件”→“新建”→“Web项目”命令，输入项目的名称并单击“确定”按钮。

在项目下建立CSS、img和JS文件夹，再建立index.html文件，然后在CSS内建立style.css文件。

2. 编辑index.html文件

例子中用到的代码在后续章节中都会学到，在此就是先体会一下如何用HTML5制作一个小页面。

3. 编辑style.css文件

在style.css文件中用到的属性，在本书后续章节中将会讲到。

项目运行结果如图2-49所示。