读书频道 > 网站 > 网页设计 > Bootstrap实战
3.4.5 响应式设计流程和实战
2013-11-02 16:46:23     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

本书由国内资深前端工程师撰写,是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法,详细讲解了Bootstrap的组件、插件和扩展技术,而且深度解析了Bootstrap的内核源代码  立即去当当网订购

响应式Web设计流程如下。

(1)确定需要兼容的设备类型、屏幕尺寸

通过用户研究,了解用户使用的设备分布情况,确定需要兼容的设备类型、屏幕尺寸。

设备类型:包括移动设备(智能手机、平板电脑等)和PC。对于移动设备,设计和实现的时候注意增加手势的功能。

屏幕尺寸:包括各种手机屏幕的尺寸(包括横向和竖向)、各种平板电脑的尺寸(包括横向和竖向)、普通电脑屏幕和宽屏。

在设计中要注意以下问题:

在响应式设计页面时,确定页面适用的尺寸范围。例如,1688搜索结果页面,跨度可以从手机到宽屏电脑,而1688首页由于结构过于复杂,想直接迁移到手机上不太现实,不如重新设计一个手机版的首页。

结合用户需求和实现成本,对适用的尺寸进行取舍。如一些功能操作的页面,用户一般没有在移动端进行操作的需求,没有必要进行响应式设计。

(2)制作线框原型

针对确定需要适应的几个尺寸,分别制作不同的线框原型,需要考虑清楚不同尺寸下,页面的布局如何变化,内容尺寸如何缩放,功能、内容的删减,甚至针对特殊的环境作特殊化的设计等。这个过程需要设计师和开发人员密切沟通。

(3)测试线框原型

将图片导入到相应的设备进行一些简单的测试,可以尽早发现可访问性、可读性等方面的问题。

(4)视觉设计

由于移动设备的屏幕像素密度与传统电脑屏幕不一样,在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等。

(5)脚本实现

与传统的Web开发相比,响应式设计的页面由于页面布局、内容尺寸发生了变化,最终的成品更有可能与设计稿出入较大,需要开发人员和设计师多沟通。

例如,在下面示例中将页面父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。通过Media Query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由固定方式改为流式版式,布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。演示效果如图3-27所示。

 

在本示例中,主要应用了下面几个技术和技法。

Media Query JavaScript。对于那些尚不支持Media Query的浏览器,在页面中调用css3-mediaqueries.js。

使用CSS Media Query实现自适应页面设计,使用CSS根据分辨率宽度的变化来调整页面布局结构。

设计弹性图片和多媒体。通过max-width: 100%和height: auto实现图片的弹性化。通过width: 100%和height: auto实现内嵌元素的弹性化。

字号自动调整的问题,通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整。

第1步:新建HTML5类型文档,编写HTML代码。使用HTML5标签来更加语义化地实现这些结构,包括页头、主要内容部分、侧边栏和页脚。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="pagewrap">
     <header id="header">
         <hgroup>
             <h1 id="site-logo">Demo</h1>
             <h2 id="site-description">Site Description</h2>
         </hgroup>
         <nav>
             <ul id="main-nav">
                  <li><a href="#">Home</a></li>
             </ul>
         </nav>
         <form id="searchform">
              <input type="search">
         </form>
     </header>
     <div id="content">
         <article class="post"> blog post </article>
     </div>
     <aside id="sidebar">
         <section class="widget"> widget </section>
     </aside>
     <footer id="footer"> footer </footer>
</div>
</body>
</html>

第2步:IE是永恒的话题,对于HTML5标签,IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。因此,这里添加如下兼容技法,调用该JS文件。
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

第3步:设计HTML5块级元素样式。首先仍是浏览器兼容问题,虽然经过上一步努力已经可以在低版本的IE中创建HTML5元素节点,但还是需要在样式方面做些工作,将这些新元素声明为块级样式。
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
        display: block;
}

第4步:设计主要结构的CSS样式。这里将忽略细节样式设计,而将注意力集中在整体布局上。整体设计在默认情况下页面容器的固定宽度为980像素,页头部分(header)的固定高度为160像素,主要内容部分(content)的宽度为600像素,左浮动。侧边栏(sidebar)右浮动,宽度为280像素。
<style type="text/css">
#pagewrap {
     width: 980px;
     margin: 0 auto;
}
#header { height: 160px; }
#content {
     width: 600px;
     float: left;
}
#sidebar {
     width: 280px;
     float: right;
}
#footer { clear: both; }
</style>

第5步:初步完成了页面结构的HTML和默认结构样式,当然,具体页面细节样式就不再烦琐,读者可以参考本节的示例源代码。

此时预览页面效果,由于还没有做任何Media Query方面的工作,页面还不能随着浏览器尺寸的变化而改变布局。在页面中调用css3-mediaqueries.js文件,解决IE8及其以前版本支持CSS3 Media Query。
<!--[if lt IE 9]>
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.
     js"></script>
<![endif]-->

第6步:创建CSS样式表,并在页面中调用:
<link href="media-queries.css" rel="stylesheet" type="text/css">

第7步:借助Media Query技术设计响应式布局。

当浏览器可视部分宽度大于650px、小于980px时(流式布局),将pagewrap的宽度设置为95%,将content的宽度设置为60%,将sidebar的宽度设置为30%。
@media screen and (max-width: 980px) {
   #pagewrap { width: 95%; }
   #content {
       width: 60%;
       padding: 3% 4%;
   }
   #sidebar { width: 30%; }
   #sidebar .widget {
       padding: 8% 7%;
       margin-bottom: 10px;
   }
}

第8步:当浏览器可视部分宽度小于650px时(单栏布局),将header的高度设置为auto;将searchform绝对定位在top: 5px的位置;将main-nav、site-logo、site-description的定位设置为static;将content的宽度设置为auto(主要内容部分的宽度将扩展至满屏),并取消float设置;将sidebar的宽度设置为100%,并取消float设置。
@media screen and (max-width: 650px) {
   #header { height: auto; }
   #searchform {
        position: absolute;
        top: 5px;
        right: 0;
   }
   #main-nav { position: static; }
   #site-logo {
        margin: 15px 100px 5px 0;
        position: static;
   }
   #site-description {
        margin: 0 0 15px;
        position: static;
   }
   #content {
        width: auto;
        float: none;
        margin: 20px 0;
   }
   #sidebar {
        width: 100%;
        float: none;
        margin: 0;
   }
}

第9步:480px是iPhone横屏时的宽度,当浏览器可视部分的宽度小于该数值时,禁用HTML节点的字号自动调整。默认情况下,iPhone会将过小的字号放大,这里可以通过-webkit-text-size-adjust属性进行调整。将main-nav中的字号设置为90%。
@media screen and (max-width: 480px) {
 html {
        -webkit-text-size-adjust: none;
 }
 #main-nav a {
         font-size: 90%;
         padding: 10px 8px;
 }
}

第10步:设计弹性图片。为图片设置max-width: 100%和height: auto,实现其弹性化。对于IE,仍然需要做一点额外的工作。
img {
  max-width: 100%;
  height: auto;
   width: auto\9; /* ie8 */
}

第11步:设计弹性内嵌视频。对于视频也需要做max-width: 100%的设置,但是Safari对embed的该属性支持不是很好,所以使用以width: 100%来代替。
.video embed,.video object,.video iframe {
     width: 100%;
     height: auto;
     min-height: 300px;
}

第12步:iPhone中的初始化缩放。在默认情况下,iPhone中的Safari浏览器会对页面进行自动缩放,以适应屏幕尺寸。这里可以使用以下的meta设置,将设备的默认宽度作为页面在Safari的可视部分宽度,并禁止初始化缩放。
<meta name="viewport" content="width=device-width; initial-scale=1.0">

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.4.4 自适应显示/隐藏页面内容
下一篇:3.4.6 响应式Bootstrap
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站