65.9K
CodeProject 正在变化。 阅读更多。
Home

响应式 Web 设计（RWD）——“丰富用户体验（UX）的新范式”

Jitendra_Jain04
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.18/5 (9投票s)

2015 年 4 月 23 日

CPOL

9分钟阅读

viewsIcon

40599

响应式网页设计是一种网页设计方法，它注重丰富的用户体验，并为用户提供最佳的网站查看可用性。

传统网页设计概述

网页设计是用户界面开发的核心部分。它是最终用户以交互方式与系统交互的一种方式。传统的用户界面是使用旧的网页设计方法构建的，这些方法不重视用户体验或可用性。只要用户能够执行业务工作流程，最终用户就对 UI 导航流程感到满意。JSP、JSF、ASP.net、PHP、HTML 是 UI 开发的顶级语言和规范。

传统网页设计缺少什么？

如果我们审视当前的IT世界和可用的最新用户界面规范，以下是传统网页设计中缺少的一些参数。

  1. 可用性
  2. 实地研究
  3. 信息架构
  4. 界面布局
  5. 交互设计 (IxD)
  6. 数字媒体作品
  7. 头脑风暴协调
  8. 原型设计

响应式网页设计 (RWD) 简介

响应式网页设计是一种网页设计方法，它注重丰富的用户体验，并为用户提供最佳的网站查看可用性。用户可以轻松阅读、最小滚动和更少调整大小来浏览响应式网站。

响应式网页设计最适合

  • 台式电脑
  • 平板电脑（小型和大型平板）
  • 智能手机

基于响应式网页设计的网站在从 **240px** 到 **1680px** 的所有分辨率下都能获得最佳可见性。响应式网站根据查看环境（即根据设备类型）调整屏幕布局。像台式机这样的设备在屏幕上显示多个标签页，但同样多个标签页在智能手机上可能会变成汉堡菜单。在另一个用例中，台式机设备上的多个图像可能会变成轮播组件，以在平板电脑或 iPhone 等分辨率较小的设备上显示所有图像。

为什么我们需要响应式网页设计 (RWD)？

“**_网络的未来是移动端_**”世界正在随着智能设备的广泛使用而迅速变化。智能手机和平板电脑是世界各地常见的设备。根据一项调查，美国有 51% 的人使用智能手机。其他国家也观察到同样的趋势。每个人都希望在智能手机和手持设备上访问他们的应用程序。

行业正在迅速向应用转型迈进。传统网站以及面向客户的UI应用正在转向智能设备。Android应用、iOS应用、Windows应用现在已成为任何信息技术转型的一部分。银行、金融、保险、零售、能源、制药等垂直行业已开始转向响应式网站。用户体验和可用性成为行业成功运营业务的重要方面。我们不能忽视其重要性。因此，我们在此也讨论了RWD。

今年全球将有超过43亿人使用手机。更令人印象深刻的是，eMarketer预测，到2017年，全球手机用户数量将突破50亿。

aaa

来源：http://www.statista.com/chart/1517/worldwide-mobile-phone-users/

响应式网页设计原则

响应式网页设计遵循以下核心原则

  1. 移动优先方法

-_创建一个基本网站并针对智能手机和PC进行增强。_

  1. 基于浏览器、设备或功能检测的渐进式增强

                       -使用Modernizr JS框架。

  1. 断点识别

-Xs、Xm、Ld等，根据设备尺寸。

  1. 设备类型内容渲染

-为多个设备渲染相同或不同的内容。

 

响应式网页设计公式

如何实现响应式网页设计？

响应式网页设计 (RWD) 的实现基于一些关键特性。以下是使设计具有响应性需要解决的特性。

 

流式、基于比例的网格

流式网格概念意味着根据页面元素大小按比例调整网格列的大小。它应该使用百分比等相对单位，而不是像素或磅等绝对单位。基于比例的网格也称为弹性布局。这些相对长度或单位用于声明常见的网格属性值，如其宽度、边距和填充等。

灵活的图片

使用相对单位定义图像尺寸，以确保图像始终在可用尺寸内显示。我们可以防止图像显示在其包含屏幕元素区域之外。我们可以将网站上所有图像的最大宽度设置为100%。

代码

img {
       max-width: 100%; ( /* max image widget based on device/browser size */)
     }

使用上述样式，图像将不会以其原始宽度渲染并溢出其包含框，而是所需的图像将以其原始尺寸渲染，只要其宽度不超过其父容器的宽度。我们还可以使用 RWD 框架提供的特定样式来制作响应式图像。例如，Twitter Bootstrap 中提供了 **.img-responsive** 类，用于灵活的图像。

对于大多数嵌入式视频，我们可以使用以下样式

img 
{
     object {   /* object type is a media over here */
     max-width: 100%; ( /* max widget based on device/browser size */)
}

CSS3 媒体查询和屏幕分辨率

CSS3 提供了丰富的媒体查询支持。媒体查询允许网站页面根据与之关联的媒体规则使用不同的 CSS 样式表。媒体规则可以根据设备类型和屏幕尺寸定义。它还会考虑浏览器的宽度。视口宽度或设备方向（横向/纵向）是应用媒体查询时使用的一些关键参数。

语法：“@media 规则”：它为不同的媒体类型/设备定义不同的样式媒体规则。

  • 在早期版本 (CSS2) 中，我们称之为：“媒体类型”
  • 在最新版本 (CSS3) 中，我们称之为：“媒体查询”

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 960px)" href="custom.css" />
<!-- CSS media query within a stylesheet -->
<style>
  @media (max-width: 640px) {
  .facet_sidebar {
      display: none;
  }
}
</style>

 

@media only screen and (max-width: 580px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    } }
注意：当媒体查询为真时，将应用相应的样式表或样式规则。

响应式网页设计代码示例

基本代码结构

步骤 1：

我们可以通过为 HTML 网站的 CSS 样式表添加一些基本规则来轻松开始创建响应式设计。首先，我们需要将“视口元标签”添加到 HTML 页面的 部分。它告诉浏览器以全尺寸显示页面，而不是缩放它。

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

通过以上标签，我们确保较小的设备不会缩放内容。

步骤 2：

我们的下一步是添加 CSS 代码，该代码使用 CSS3 媒体查询控制这些小屏幕情况下的显示。

在您的 CSS 样式表中使用 @media only screen 代码。这是一个例子

/* -----------Smartphone View----------- */ 

@media only screen and (max-width : 480px)   {

   /* All your smartphone rules go inside here */

}

/* -----------Tablet View----------- */ 

@media only screen and (max-width : 768px)   {

   /* All your tablet rules go inside here */

}

/* -----------Desktop View----------- */ 

@media only screen and (max-width : 1280px)   {

   /* All your desktop rules go inside here */

}

如何在 Twitter Bootstrap 3 中创建响应式图片？以下是示例代码

<div class="col-md-4 col-sm-4 col-xs-12 ">

        <div class="customer">              

                <div class="customer-img ">

                   <img class="img-responsive" src="img/show-customer.jpg" alt="" />

                </div>

           </div>

</div>

设备和标准视口

以下是设备和视口的标准列表。仅供视口参考

设备类型

标准视口

缩小到

桌面

1600x992像素

比例(0.3181)

笔记本电脑

1280x802像素

比例(0.277)

平板电脑

768x1024像素

比例(0.219)

移动设备

320x480像素

比例(0.219)

如何测试响应式网页设计？

我们可以使用智能手机、平板电脑等实际手持设备来测试响应式设计，但如果没有设备，我们甚至可以使用 **_RWD 测试模拟器_** 进行测试。模拟器允许我们跨设备在多种分辨率下进行测试。可以使用以下模拟器。

  1. http://www.isresponsive.com/
  2. https://www.responsinator.com/
  3. http://ami.responsivedesign.is/
  4. http://mattkersley.com/responsive/
  5. http://www.browserstack.com/responsive
  6. Google Chrome 浏览器内置模拟器

业界对响应式网页设计的看法？

Gartner 对响应式网页设计的看法

“根据 Gartner 报告，“尽管存在局限性，响应式网页设计使许多组织能够转向统一的 Web 渠道。”

来源：https://www.gartner.com/doc/2571622/despite-limitations-responsive-web-design

 

Forrester 对响应式网页设计的看法

“根据 Forrester 报告，“_响应式设计理念代表了多触点网页设计的未来方向，根据 Forrester 的一份新报告。“理解响应式设计”建议，虽然响应式设计之路充满坎坷，但目标值得付出努力。_”

来源： http://www.cmswire.com/cms/customer-experience/forrester-responsive-design-represents-future-of-multitouchpoint-web-design-016786.php#null

 

谷歌怎么看？

“Google 表示，如果您的网站采用响应式设计进行编程，他们的程序就可以更轻松、更高效地索引您的内容。我们认为这全面更容易，因为单个 URL 上的内容可以在任何类型的设备上更轻松地访问和共享。它不需要不同的 URL 或 HTML 应用程序。这就是为什么我们自 2011 年以来一直在客户端网站上应用响应式设计。* 它们都可以在小屏幕智能手机、大屏幕台式机以及介于两者之间的任何笔记本电脑或平板电脑上轻松查看完整内容和颜色。”

来源： http://www.wsiwebspecialist.com/the-webspecialist-blog/google-officially-endorses-responsive-design

 

福布斯2013年电子商务营销清单

“拥有一个适合移动设备的网站不再仅仅是重要，而是至关重要。”

来源：http://www.forbes.com/sites/brentgleeson/2013/03/14/ecommerce-marketing-checklist-for-2013/

 

卫报新闻与媒体

“卫报新闻与媒体今天推出了全新的响应式移动网站，旨在针对所有智能手机和小型平板设备进行视觉优化。” 随着手机和平板电脑的使用量持续快速增长，人们阅读我们的设备和屏幕尺寸也越来越多。我们自己的移动流量同比增长了惊人的 63%。”

来源：http://www.theguardian.com/gnm-press-office/guardian-rolls-out-new-responsive-mobile-site-following-beta-trial

响应式网页设计的优势

 

 

用于响应式网页设计的框架

有许多可用于响应式设计实现的框架。以下是一些我们可以用来构建响应式网站的顶级 RWD 框架。

 

响应式网页设计的挑战

响应式网页设计的实现面临诸多挑战。有时，面对大量设备、浏览器和分辨率，它会变得更加繁琐和复杂。处理从220px到1600px的设备上的响应式内容是一项艰巨的任务，因为市场上可用的Android、iOS、黑莓和Windows操作系统设备超过100种。以下是我们面临的一些主要挑战

顶级响应式网站

https://www.barackobama.com/

http://magazine.rolexawards.com/

http://picasa.google.com/

http://www.google.com/about/

http://www.starbucks.com/

http://www.salesforce.com/

http://disney.com/

http://time.com/

http://www.eurosport.fr/

摘要

基于以上细节，我们可以继续实施响应式网页设计 (RWD)。我们可以使用现有的 RWD 框架来减少开发时间和精力，或者我们也可以使用 CSS3 媒体查询以及 jQuery 和 JavaScript 支持。框架为我们提供了更大的灵活性和可重用性，以及多个现成的 UI 小部件和组件。我们还应根据业务需求确定移动优先或桌面优先的方法。目标设备、浏览器支持也是响应式网页设计中的关键属性。断点选择应始终根据定义的业务范围进行优化。

参考文献

https://mdn.org.cn/zh-CN/docs/Web/Guide/CSS/Media_queries

http://www.slideshare.net/TirtheshGanatra/responsive-web-design-headstart-techtalks

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

http://zh.wikipedia.org/wiki/响应式网页设计

http://webshopmanager.com/n-9447-5-benefits-of-responsive-web-design.html

http://www.thebyte9.com/news/responsive-web-design-what-can-it-do-for-your-business

http://www.statista.com/chart/1517/worldwide-mobile-phone-users/

© . All rights reserved.