桌面网站的设计趋势是固定布局(fixed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局，它可以使你的网站适应不同的设备尺寸。　　

　　固定宽度布局(Fixed Layout)
　　这种布局有一个设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。重要的是容器（外包裹）元素是设置为不能移动的。无论访问者屏幕的分辨率是是多少，网页都显示为和其它访问者相同的宽度。

　　960px已经成为现代web设计的标准，因为大多数站点用户被假定为1024x768分辨率。

　　流动/流体布局（Fluid/Liquid Layout）
　　主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。

　　虽然外面有时候可能给流动布局中某些元素设置了固定宽度，比如margin,只要主体原始是百分比宽度，就可以让布局自适应各种分辨率。

　　新建两个文件ch01r06_a.html和ch01r06_b.html

ch01r06_a.html代码：

<!doctype html>

<html>

    <head>

        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

        <script src="modernizr-1.7.min.js"></script>

        <style>

            body,#main ul,#main li,h1{

                margin: 0;padding: 0;

            }

            body{

                background: #FFFFA6;

            }
　　　　　　　　/* 固定布局 */

            #container{

                font-family: Arial;

                width: 300px;

                margin: 0 auto;

            }

            header,footer{

                display: block;

            }

            #main li{

                list-style: none;

                height: 40px;

                background:#29D9C2;

                margin-bottom: 0.5em;

                line-height: 40px;

                -moz-border-radius: 15px;

                --webkit-border-radius: 15px;

                border-radius: 15px;

            }

            #main li a{

                color: white;

                text-decoration: none;

                margin-left: lem;

            }

        </style>

    </head>

    <body>

        <div id="container">

            <header>

                <h1>Title here</h1>

            </header>

            <nav id="main">

                <ul>

                    <li><a href="#">Home</a></li>

                    <li><a href="#">Contact</a></li>

                    <li><a href="#">Location</a></li>

                    <li><a href="#">Product</a></li>

                    <li><a href="#">About</a></li>

                </ul>

            </nav>

            <footer>

                Footer links here

            </footer>

        </div>

    </body>

</html>

ch01r06_b.html代码：

<!doctype html>

<html>

    <head>

        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">

        <script src="modernizr-1.7.min.js"></script>

        <style>

            body,#main ul,#main li,h1{

                margin: 0;padding: 0;

            }

            body{

                background: #FFFFA6;

            }
　　　　　　　/* 流体布局 */

            #container{

                font-family: Arial;

                margin: 0 10px;

            }

            header,footer{

                display: block;

            }

            #main li{

                list-style: none;

                height: 40px;

                background:#29D9C2;

                margin-bottom: 0.5em;

                line-height: 40px;

                -moz-border-radius: 15px;

                -webkit-border-radius: 15px;

                border-radius: 15px;

            }

            #main li a{

                color: white;

                text-decoration: none;

                margin-left: 1em;

            }

        </style>

    </head>

    <body>

        <div id="container">

            <header>

                <h1>Title here</h1>

            </header>

            <nav id="main">

                <ul>

                    <li><a href="#">Home</a></li>

                    <li><a href="#">Contact</a></li>

                    <li><a href="#">Location</a></li>

                    <li><a href="#">Product</a></li>

                    <li><a href="#">About</a></li>

                </ul>

            </nav>

            <footer>

                Footer links here

            </footer>

        </div>

    </body>

</html>

两个页面的纵向显示看起来几乎一样。如图效果：

但是在横向显示中，第一个例子（效果图a）两边出现了空白，而第二个例子（效果图b）充满了整个屏幕。

               　　　　　　　　　　　　　　　　　　　　　　　　　　　图 a

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图 b

　　这个页面在固定布局中看起来很奇怪，但在流体布局中正常显示。所以当你在针对移动设备做设计时，始终谨记保持这种灵活性，因为：

　　1.移动设备有横向纵向显示。
　　2.移动设备的屏幕空间很有限，所以需要利用好每个像素。

HTML5移动Web开发（四）——移动设计的更多相关文章

  1. HTML5移动Web开发实战 PDF扫描版​

    <HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...

  2. HTML5移动Web开发（八）——避免文本字体大小重置

    适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...

  3. web开发四个作用域

    web开发一共有四个作用域,范围从高到低分为appliaction作用域(全局作用域),session作用域,request作用域和page作用域.${base}是el表达式语法,它会自动先从page ...

  4. HTML5移动Web开发（五）——移动设计之CSS媒介查询

    CSS媒介查询(media query)是响应式设计中很重要的部分,它帮助你实现更加灵活的移动设计. 看示例代码ch01r06_c.html <!doctype html> <htm ...

  5. 浅淡HTML5移动Web开发

    说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发 ...

  6. HTML5移动Web开发

    1. 响应式web设计 说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中 ...

  7. HTML5移动Web开发（一）——HTML5和移动网站基本概念以及一些模拟器

    当前,手机设备发展迅猛.屏幕尺寸各不相同.存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能.响应式的移动网站,是Web开发者所要面对的首要挑战.HTML5以及移动网站都是很有前景的 ...

  8. html5移动web开发实战必读书记

    原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...

  9. HTML5移动Web开发（九）——优化浏览器视口宽度设置

    每个移动设备都有自己默认的视口宽度,如果你不显示的设置它的值,在渲染页面的时候你可能会得不到你想要的效果.比如,如果不设置iPhone的视口宽度,它将会按照980像素的宽度渲染页面,如果你的页面设计不 ...

随机推荐

  1. MJExtension笔记(一)

    之前有说,看好的编程就去敲好的开源项目:一直觉得这个无从下手,但是这次跟着一点点敲MJExtension,我明白了这句话的深度:其实并不需要去找,每一个三方项目都有很多值得学习的地方:笔记一只记录在敲 ...

  2. easyui的datagrid打印(转)

    在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...

  3. MVC 之 Partial View 用法

          Partial View 顾名思义就是Html代码片段,因此可以用Partial View 把部分的Html或显示逻辑包装起来,方便多次使用. Partial View 需要放在Views ...

  4. Attic 0.8.1 发布，备份程序

    Attic 0.8.1 修复了昨天刚发布的 Attic 0.8 的一个段错误. Attic 是一个可以保证文件不重复的备份程序.Attic 的主要目标是提供一个高效和安全的方法来备份数据.重复数据删除 ...

  5. 【Hello CC.NET】自动化发布时 Web.config 文件维护

    在 <[Hello CC.NET]CC.NET 实现自动化集成> 的 HellowWorld 中经实现: 1.获取源码 2.编译项目 3.集成测试 4.Ftp发布项目 5.创建安装包 6. ...

  6. Guava-Optional可空类型

    接上篇Guava之Joiner和Splitter,本篇将介绍Guava的另外一个有用的对象Optional,这在Java中Google Guava首先给我们提出可空对象模型的.在其他语言如c#这是已经 ...

  7. angularjs ng-option ie issue解决方案

    最近遇见angularjs 在IE上当使用ng-options作为select的选项数据源,并且被套在ng-switch(ng-transclude)之类的,当angular上得ng-options数 ...

  8. Windows Azure Service Bus Notification Hub推送通知

    前言 随着Windows Azure 在中国的正式落地,相信越来越多的人会体验到Windows Azure带来的强大和便利.在上一篇文章中, 我们介绍了如何利用Windows Azure中的Servi ...

  9. 一个简单的通用Makefile实现

    一个简单的通用Makefile实现   Makefile是Linux下程序开发的自动化编译工具,一个好的Makefile应该准确的识别编译目标与源文件的依赖关系,并且有着高效的编译效率,即每次重新ma ...

  10. [硬件项目] 2、汽车倒车雷达设计——基于专用倒车雷达芯片GM3101的设计方案与采用CX20106A红外线检测芯片方案对比

    前言 尽管每辆汽车都有后视镜,但不可避免地都存在一个后视镜的盲区,倒车雷达则可一定程度帮助驾驶员扫除视野死角和视线模糊的缺陷,提高驾驶安全性.上一节已经分析清倒车雷达的语音模块(上一节),本节将深入分 ...