1.5　实战：第一个移动端Web页面

第一个移动端Web页面，实现一个简单的登录注册静态页面，该页面能够适应不同的手机屏幕，包含用户名和用户密码，登录按钮与可选择的是否忘记密码和注册提示，适应REM和媒体查询来实现响应式布局。

步骤01　在进行代码的编写之前，首先新建一个css文件夹，里面存放一个base.css文件用于处理一些默认全局样式，比如清除浏览器默认的内外边距、清除浮动、去掉li标签等。base.css代码如下：

步骤02　编写静态登录页结构代码。首先引入基础样式文件和index.html文件对应的样式文件index.css及js文件index.js；然后使用两个input标签实现用户名和密码的输入，一个按钮代表登录；最后利用a标签实现忘记密码和去注册的跳转。代码如下：

步骤03　index.css文件是为登录页面编写的样式，主要通过rem为单位和媒体查询匹配不同手机屏幕，设置字体大小和容器宽度，从而实现动态变化。index.css代码如下：

步骤04　在index.js文件中通过JS提供的document.documentElement.clientWidth获取屏幕宽度（clientWidth），将其分为10份，根据每一份的大小动态设置字体的大小（font-size）。设计图一般以iPhone 6为基础设计，所以通过判断手机屏幕宽度是否大于750px来设置1rem的大小，然后通过自执行函数来根据窗口大小的变化实时动态地得到计算结果。代码如下：

    (function(){
    var calc = function(){
         var rem = document.documentElement.clientWidth/10;
         document.documentElement.style.fontSize = rem + 'px';
         rem = document.documentElement.clientWidth > 750 ? 37.5 : rem;
    }
    calc();
    window.addEventListener('resize',calc);
    })();

步骤05　页面在不同屏幕上运行的最终效果如图1.11和图1.12所示。

图1.11　iPhone 6/7/8手机屏幕显示效果（宽为360px）

图1.12　iPad显示效果

上述实战代码中涉及许多响应式布局，这些内容是移动端开发的必备内容，是关键技术，因此在后面的章节会详细讲解移动端的屏幕适配等知识点。