桌面网站的设计趋势是固定布局(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. PHP多文件上传（二维数组$_FILES('文件域的名称')，move_uploaded_file（‘临时文件名’，‘新的文件名’））

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. php模拟登陆的两种实现方法分析

    php模拟登陆的实现方法分析 本文实例分析了php模拟登陆的实现方法.分享给大家供大家参考.具体分析如下: php模拟登陆的实现方法,这里分别列举两种方法实现模拟登陆人人网.具体实例代码如下: 1)使 ...

  3. java分割字符串

    经验分享: 1.分隔符为“.”(无输出),“|”(不能得到正确结果)转义字符时,“*”,“+”时出错抛出异常,都必须在前面加必须得加"\\",如split(\\|); 2.如果用& ...

  4. [Xamarin] 從Xamarin中呼叫 *.jar 的 library - 呼叫篇 (转帖)

    上篇文章我們建立一個很簡單的Library : com.example.blackfactory.UtilFunc 現在我們要在Xamarin 中呼叫囉! 首先我們要先成立一個橋接的專案 JARBri ...

  5. 将asp.net webapi的运行时版本由4.0升级到4.5.1时遇到的问题及解决

    更新package 更改.net运行时的版本之后,出现了错误提示,说需要改新以下组件: EntityFramework, EntityFramework.zh-Hans, Microsoft.AspN ...

  6. 使用C#开发ActiveX控件（新）

    前言 ActiveX控件以前也叫做OLE控件,它是微软IE支持的一种软件组件或对象,可以将其插入到Web页面中,实现在浏览器端执行动态程序功能,以增强浏览器端的动态处理能力.通常ActiveX控件都是 ...

  7. UML动态模型图简单介绍

    UML动态模型图描述了系统动态行为的各个方面,包括用例图.序列图.协作图.活动图和状态图.下面就每种图做一个简单介绍: 用例图 用例图描述系统外部的执行者与系统提供的用例之间的某种联系.所谓用例是指对 ...

  8. 在MVVM模式中，按钮Click事件的绑定方法

    在MVVM模式中,我们将Button的方法写到ViewModel中,然后绑定到前端界面.通常的做法是写一个类,继承ICommand接口,然而如果按钮比较多的话,就需要写很多的类,对于后期维护造成很大的 ...

  9. 一个简单的、面向对象的javascript基础框架

    如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...

  10. DISCUZ 自定义模板

    DISCUZ 自定义模板 模板安装和维护 安装新模板 将模板template打包放在对应目录:template/ 后台 -> 界面 -> 风格管理 , 安装模板 后台 -> 界面 - ...