3.3 关于界面设计
本章范例3-1中展示了一种使用CSS 3和HTML 5实现的界面，但是这个界面实际上有一点问题，那就是当屏幕过宽时可能会变形，如图3-6所示。
图3-6 顶部的图片由于拉伸而严重变形
也许在图中由于使用了老虎而无法看出特别巨大的反差，那么假如顶部的图片换成了我们敬爱的“超人叔叔”，这时落差就非常明显了（如图3-7所示）。
图3-7 正常尺寸和被拉伸变形后的超人对比
对于这样的情况，目前确实找不到一种公认的“最好”方法来解决，但是却有几套备选方案：
● 利用JavaScript获取屏幕的尺寸并准备多套CSS样式文件，然后根据屏幕的尺寸来决定使用哪套CSS样式。
● 选择图片时尽量不使用有人物或者是电线杆等景物的图片，这样即使变形了也很难被发现。
● 直接利用JavaScript来保证图片的高度与宽度保持一定的比例。
提示
作为一个懒人，笔者推荐使用第二种方案，但是实际上如果能将三种方案结合起来才是最好的方案。
除此之外还要考虑到顶部栏和尾部栏的样式，顶部栏和尾部栏都是应用中经常会用到的元素，许多开发者都担心，如果手机的像素密度越来越高，固定尺寸的顶部栏和尾部栏会不会由于像素密度的原因小到让用户看不清楚呢？
对于这个问题笔者也不好回答，因为这种情况在未来倒也不是不可能发生，但是就目前来看所谓最前沿的4K屏幕已经有些性能过剩了，因此几年内开发者们还没有必要为此而纠结。
将顶部栏和尾部栏的高度设置为40px是公认为比较合适的尺寸，为了保证显示的效果可以使用position将它们固定在屏幕的顶部和底部。
【范例3-5】页面的顶部栏和尾部栏。
01 <! DOCTYPE html>
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>页面的顶部栏和尾部栏</title>
06 <style>
07 * { margin:0px; } /* 清除页面自带边距 */
08 header /* 顶部栏 */
09 {
10 width:100%;
11 height:40px; /* 高度为40px */
12 background:#990;
13 position:fixed; /* 设置定位方式 */
14 top:0px; /* 使顶部栏位于屏幕顶端 */
15 }
16 footer /* 尾部栏 */
17 {
18 width:100%;
19 height:40px; /* 高度为40px */
20 background:#990;
21 position:fixed; /* 设置定位方式 */
22 bottom:0px; /* 使尾部栏位于屏幕底部 */
23 }
24 #title
25 {
26 width:100%;
27 height:40px;
28 line-height:40px;
29 color:#FFF;
30 text-align:center;
31 font-size:24px;
32 }
33 #content /* 页面中真正的内容 */
34 {
35 width:90%;
36 height:1600px;
37 margin:40px 5%; /* 设置外边距使被顶部栏和尾部栏遮挡的部分留白
*/
38 }
39 #content h1
40 {
41 margin:auto;
42 font-size:36px;
43 font-weight:bold;
44 text-align:center;
45 line-height:60px;
46 }
47 #line
48 {
49 width:100%;
50 height:1px;
51 background-color:#333;
52 float:left;
53 }
54 </style>
55 </head>
56 <body>
57 <header>
58 <div id="title">页面的顶部栏和尾部栏</div>
59 </header>
60 <div id="content">
61 <h1>此处显示内容</h1>
62 <div id="line"></div>
63 </div>
64 <footer>
65 </footer>
66 </body>
67 </html>
运行之后可以利用鼠标的滚轮配合Ctrl键来调整浏览器的放大和缩小，如图3-8和图3-9所示，可见在大多数情况下，40px的高度已经足够用户看清屏幕了。
图3-8 页面的顶部栏和尾部栏
图3-9 页面的顶部栏和尾部栏
通过范例中的CSS样式可以看出，顶部栏和尾部栏利用了将定位方式设置为fixed的方式，来保证最终这两个元素是相对于屏幕对齐的。在实际应用中还可以为这两个元素加入zindex属性，来保证它们不会被其他元素遮挡。
其次就是真正显示内容的content部分，由于它们的一部分内容是被顶部栏和尾部栏覆盖住的，因此如果在这些地方显示内容，结果就会有一部分内容无法显示，如图3-10所示，此时需要为它加入外边距，如范例第37行所示。
图3-10 顶部栏的上边距被取消后一部分内容会被顶部栏遮盖住
至于其他的内容读者可以自己对比范例来学习，另外在实际使用时可能会有开发者喜欢为顶部栏加入一些阴影的特效，但是由于笔者艺术水平不高，尝试过后还是决定放弃了。