当前位置：文档之家 › 响应式网页设计

响应式网页设计

  • 格式：pdf
  • 大小：541.60 KB
  • 文档页数：10

1

响应式网页设计

概念

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各

自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应

式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计

的全新思维模式；我们应当向下兼容、移动优先。

背景

PC互联网加速向移动端迁移：2012年12月底我国网民规模达到5.64亿，互联网普及率为

42.1%，手机用户占网民总数的74.5%。预计到2015年，移动互联网的数据流量将超越PC端

的流量。

移动端入口：当用户希望通过手机来完成PC页的操作时，常见的是商家的运营微博，期文案

足够吸引用户点击链接参加活动，如果该活动页没做响应式处理：页面体积大、请求多、体验

差、兼容性差，层层阻碍最终导致用户放弃参加。

优势

开发成本低，门槛低

 Native APP：Objective-C or Java – 学习成本高

 Hybrid APP： 外壳+Web APP，需安装。

 响应式Web APP：HTML5+JS+CSS – 门槛低，极易上手，迭代快 2

跨平台和终端且不需要分配子域

虽然可通过监测用户UA来判断用户终端后做跳转，但它还是分配了多个域，而响应式无需监

测用户UA没有域的切换，只需根据终端类型来适配不同的功能模块与表现样式，它是跨平台

和终端的，1页面适配多终端。

 PC – http://www.topzhong.com

 Mobile – http://map.topzhon.com

 响应式：PC & Mobile – http:// www.topzhong.com 无需跳转

本地存储

Web App可以利用本地存储的特性将重要和重复的数据保存在本地，避免页面的重复刷新，减

少重要信息在传输过程中被泄露，增量传输修改内容。

无需安装成本，迭代更新容易

更灵活、更方便的APP使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一

实施

首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；

一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：

1. 响应式布局

2. 响应式内容（图片、多媒体）

响应式布局

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏

(landscape)，怎样才能做到让一种设计方案满足所有情况？

那么我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不

同尺寸下的位置： 3

那么我们要怎么做？

Meta标签定义

使用 viewport meta 标签在手机浏览器上控制布局

1

通过快捷方式打开时全屏显示

1

隐藏状态栏

1

iPhone会将看起来像电话号码的数字添加电话连接，应当关闭

1

神飞：很多人常常使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染而

不会自动缩放，用户需要手动移动页面或者缩放。最差的是和initial-scale=1同时使用

user-scalable=no或maximum-scale=1，这将使你的网站不能被缩放——用户不能放大/缩小

网页来看到全部的内容。所以，请记住：如果你的网站不是响应式的，请不要使用

initial-scale或者禁用缩放。

使用 Media Queries 适配对应样式

常用于布局的CSS Media Queries有以下几种

设备类型(media type):

all所有设备

screen 电脑显示器

print打印用纸或打印预览视图

handheld便携设备

tv电视机类型的设备

speech语意和音频盒成器

braille盲人用点字法触觉回馈设备

embossed盲文打印机 4

projection各种投影设备

tty使用固定密度字母栅格的媒介，比如电传打字机和终端

设备特性(media feature):

width浏览器宽度

height浏览器高度

device-width设备屏幕分辨率的宽度值

device-height设备屏幕分辨率的高度值

orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为

portrait，否则为landscape

aspect-ratio比例值，浏览器的纵横比

device-aspect-ratio比例值，屏幕的纵横比

example:

1

2

3

4 /* for 240 px width screen */

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

selector{ ... }

}

1

2

3

4 /* for 320px width screen */

@media only screen and (min-device-width:241px) and (max-device-width:320px){

selector{ ... }

}

1

2

3

4 /* for 480 px width screen */

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

selector{ ... }

}

适用于布局的 Media Queries 这里不做详述，可通过官方文档进一步了解

那么对于表格(table)的响应式处理该是怎样的呢？我们该如何突破Table的局限性呢？

接下来我们来了解以下的几种针对表格响应式处理的方法：

隐藏不重要数据列

处理前 5

处理后

实现方法：

1

2

3

4

5

6 7

8

9

10

11

12

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

table td:nth-child(2),

table th:nth-child(2) {display: none;}

}

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

table td:nth-child(4),

table th:nth-child(4),

table td:nth-child(7),

table th:nth-child(7),

table td:nth-child(8),

th:nth-child(8){display: none;}

}

以用户角度思考，每个人对数据的认知不同，或许你隐藏的数据对于他却是很重要的。所以这

种方法不推荐。

多列横向变2列纵向

处理前 6

处理后

实现方法：

定位隐藏，

变块元素，并绑定对应

列名，然后用伪元素的

content:attr(data-th)实现

固定首列，剩余列横向滚动

处理前

处理后 7

实现原理：

1

2 thead {float:left;}

tbody {display:block;width:auto;overflow-x:auto;} 栅格框架推荐

 Responsive Grid System

 Fluid 960 Grid

 Simple Grid

响应式图片

带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求

的图片还是PC上的大图；文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可

估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图

形。

处理原理：浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨

率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device

pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保

证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone

查询。

解决方案：其实W3C已经有一个用于响应式图形的草案：新定义标签，因为它还只

是草案，目前还没有支持的浏览器，期待在不久的未来我们能用上。虽然目前不支持，但我们

还是来了解下，为之后的内容做个铺垫。

是一个图形element，内容由多个源图组成，并由CSS Media Queries来适配出合

理图形，代码规范如下：

1

2

3

4

5

合集下载

如何应对不同屏幕分辨率下的响应式网页设计(二)

如何应对不同屏幕分辨率下的响应式网页设计(二)

在当今数字时代，移动设备的普及使得人们随时能够上网浏览各种信息。然而，不同屏幕分辨率下网页的显示效果可能存在差异。为了确保网页在各种设备上都能正常显示，并提供良好的用户体验，响应式网页设计成为了重要的解决方案。本文将探讨如何应对不同屏幕分辨率下的响应式网页设计。

一、了解不同设备的分辨率特性

在开始设计响应式网页之前，我们首先需要了解不同设备的分辨率特性。移动设备的分辨率通常比传统台式电脑要低，而且屏幕尺寸也不一致。对于响应式网页设计来说，这意味着我们需要考虑如何在不同屏幕分辨率下保持页面的布局和功能完整。

二、采用流式布局

流式布局是响应式网页设计的核心概念之一。流式布局可以根据屏幕的大小自动调整元素在网页上的位置和大小。相比于固定布局，流式布局能够适应不同屏幕分辨率下的显示需求。

三、使用媒体查询

媒体查询是响应式网页设计中常用的技术手段。媒体查询可以根据不同的设备属性（如屏幕宽度、屏幕分辨率等）来加载不同的样式表，从而实现在不同设备上呈现不同的布局和样式。通过使用媒体查询，我们可以根据设备的特性来调整网页的显示效果，从而提供更好的用户体验。

四、优化图片 在响应式网页设计中，图片是一个常见的挑战。由于不同设备的屏幕分辨率不同，如果不加以优化，可能会导致图片在某些设备上加载缓慢或显示模糊。为了解决这个问题，我们可以采用以下两种方式：

1. 使用响应式图片：响应式图片可以根据设备的屏幕分辨率来加载不同尺寸的图片。通过这种方式，我们可以减少图片的加载时间，并且在不同设备上呈现高质量的图片。

2. 压缩图片：在设计响应式网页时，我们应该尽量减小图片的文件大小。通过使用图片压缩工具可以减少图片的文件大小，提高网页的加载速度，并减少用户消耗的流量。

五、测试和优化

在完成响应式网页的设计后，我们需要进行测试和优化以确保在不同设备上的良好显示效果。可以使用各种设备或使用模拟器来测试网页的显示效果，并根据测试结果进行相应的优化。我们还可以借助一些工具来检测网页的加载速度和性能，并根据反馈结果对网页进行进一步的优化。

响应式网站设计与开发

响应式网站设计与开发

响应式网站设计与开发

随着移动互联网的兴起，人们越来越倾向于使用移动设备进行访问网站。在这种情况下，响应式网站设计和开发变得尤为重要。响应式网站设计主要是指设计和开发一种网站，使其可以自适应不同的屏幕尺寸、分辨率和设备类型，是一种应对移动设备访问的解决方案。下面就来谈谈响应式网站设计和开发的相关内容。

一、响应式网站设计的原理和特点

响应式网站设计的核心原理是使用流动网格布局(Fluid Grid

Layout)和CSS3媒体查询(CSS3 Media Queries)，来根据不同的设备屏幕尺寸和分辨率，进行适应性的排版和显示，从而让用户在不同的设备上都能够轻松浏览和使用网站。同时，响应式网站设计还能够提高网站的可访问性、搜索引擎优化和用户体验，这些都是非常重要的优势。

响应式网站设计的特点主要包括以下几个方面：

1. 自适应布局：响应式网站能够自适应不同的屏幕尺寸和设备类型，可以在桌面电脑、平板电脑、手机等设备上进行流畅地浏览和操作。

2. 灵活的多媒体：响应式网站使用HTML5和CSS3等新技术来处理多媒体内容，如音频、视频、图像等，使这些内容可以在不同设备上得到最佳的显示效果。

3. 轻量化设计：响应式网站设计通常采用轻量级的Web标准和技术，使网站运行速度更快，同时避免出现过度复杂和不必要的设计元素。

4. 更好的用户体验：响应式网站设计注重提高用户体验，通过简单和直观的设计元素、易于导航和操作的界面等来增强用户对网站的满意度。

二、 响应式网站开发的技术和工具

要实现响应式网站设计，需要掌握一些相关的技术和工具，如下所述：

1. HTML5和CSS3：这两种技术是响应式网站设计的基础，在响应式网站的开发中，需要灵活运用它们来进行布局和样式的处理。

2. 响应式网格系统：响应式网格系统是一种用于响应式网站设计的布局系统，可以帮助开发者快速而精确地定位和构建页面布局。

3. 媒体查询：媒体查询是一种CSS3的技术，可以针对不同的设备的屏幕尺寸和分辨率，编写不同的CSS样式，来实现响应式网站的布局和显示。

22个网页设计经典案例不容错过

22个网页设计经典案例不容错过

22个网页设计经典案例不容错过

22个网页设计经典案例不容错过！

22个网页设计经典案例不容错过！

2015-12-29 10:30:14 |阅读原文 摘要：响应式页面设计与传统设计的技术和创意方面有着显著的不同，巧妙利用响应式设计在设计网站时就能得到惊人的效果。Responsive web

design【响应式网页设计】这个概念与开发网站设计有关，该设计用以帮助网页适应每个用户的计算机的分辨率，即根据每个用户使用的计算机的分辨率不同而改变网页的表现方式。更确切地说，这个概念允许一个4列布局的1292px宽度的网页可以在1025px的宽度屏幕中显示并自动简化成为两列。此外，它还能适应智能手机和电脑平板电脑。这种特殊的设计理念我们称之为“响应式设计”。

现在你可以测试一下你的网站使用的响应式设计工具。

相比较与传统的网页开发设计，响应式网页设计是一个完全不同的形式，并且开发人员【尤其是年轻的开发人员】要知道响应式网页设计的利与弊。这篇博客就是一个能够说明响应式网页设计用途的一个很有用的例子。用来开发一个响应式网站最基础直接的可能就是选择“media queries”【媒体查询，即根据条件给相应符合条件的媒体调用相应的样式表】。然而唯一比较麻烦的是，新的查询可以在瞬间弹出，但每一次跳动，网页的外观和组织都会产生突然和急剧的变

化。专家建议这种情况可以使用CSS来缓解页面的跳动。

包含数据表的页面给响应式页面设计师带来了特殊挑战。数据表在默认的情况下是非常宽的，当用户缩小页面去看整个列表时，列表就会变得太小以至于难以阅读。但当你试着放大它以便可以阅读时，就只能通过水平或竖直的滚动页面来查看它。好吧，其实是有多种方式来避免这个问题的。转变数据表的形式为饼状图或者微型图形是已经被认可的一种解决方式。这种迷你图形更适合狭小的屏幕。

图片在响应式页面设计中被称作情景感知。这独有的技术服务存在真正意义是在响应式设计中可以作为图像服务于不同的分辨率，从大屏幕到小屏幕都可以完美适应。缩放图像显然在更新开发者的工具和编码语言的帮助下更新的更加流畅，允许其在任何情况下都能更快反应。

HTML5----响应式（自适应）网页设计（自动适应屏幕大小）

HTML5----响应式（自适应）网页设计（自动适应屏幕大小）

HTML5----响应式（自适应）网页设计（自动适应屏幕大小）

HTML5----响应式（自适应）网页设计（自动适应屏幕大小）

现在，很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机，电脑等设备，那么就需要我们在页面上下功夫，但移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。下面我就来说一下如何做响应式（自适应）的网页设计

1、在网页代码的头部，加入一行viewport元标签

在网页的中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释：

属性 描述

width=device-width width为设置layout viewport 的宽度，为一个正整数，”width-device”表示宽度是设备屏幕的宽度

initial-scale=1.0 initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占网页的100%

minimum-scale=1.0 表示最小的缩放比例

maximum-scale=1.0 表示最大的缩放比例

user-scalable=no 表示用户是否可以调整缩放比例，值为”no”或”yes”

2、宽度不要用绝对的

width:auto; / width:XX%;

3、字体大小是页面默认大小的100%，即16像素，不要使用绝对大小"px"，要使用相对大小“rem”

html{font-size:62.5%;} body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

html的字体大小设置为font-size:62.5%原因：浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，10/16=0.625=62.5%，为了子元素相关尺寸计算方便，这样写最合适不过了。