如果您对自适应网页设计和ResponsiveWebDesign感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解自适应网页设计的各种细节，并对ResponsiveWebDesign进行深入的分析，

如果您对自适应网页设计和Responsive Web Design感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解自适应网页设计的各种细节，并对Responsive Web Design进行深入的分析，此外还有关于2015-2016网页设计趋势分析 Web Design of Trends、Adobe Press Responsive Web Design with Adobe Photoshop 免积分下载、Bootstrap使用响应式设计(Responsive design)时导航条上部有空白的解决方案、Mobile Web Design 移动网页设计介绍的实用技巧。

本文目录一览：

• 自适应网页设计（Responsive Web Design）（自适应网页设计代码）
• 2015-2016网页设计趋势分析 Web Design of Trends
• Adobe Press Responsive Web Design with Adobe Photoshop 免积分下载
• Bootstrap使用响应式设计(Responsive design)时导航条上部有空白的解决方案
• Mobile Web Design 移动网页设计介绍

自适应网页设计（Responsive Web Design）（自适应网页设计代码）

随着3G的普及，越来越多的人使用手机上网。

移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页?

自适应网页设计（Responsive Web Design） 浏览器 设计师 好文分享 第1张

手机的屏幕比较小，宽度通常在600像素以下;PC的屏幕宽度，一般都在1000像素以上(目前主流宽度是1366×768)，有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone /  iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal(入口)，会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局(layout)?

自适应网页设计（Responsive Web Design） 浏览器 设计师 好文分享 第2张

一、"自适应网页设计"的概念

2010年，Ethan Marcotte提出了"自适应网页设计"(Responsive Web  Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

自适应网页设计（Responsive Web Design） 浏览器 设计师 好文分享 第3张

如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。

自适应网页设计（Responsive Web Design） 浏览器 设计师 好文分享 第4张

如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。

自适应网页设计（Responsive Web Design） 浏览器 设计师 好文分享 第5张

如果屏幕宽度在400像素以下，则6张图片分成三行。

自适应网页设计（Responsive Web Design） 浏览器 设计师 好文分享 第6张

mediaqueri.es上面有更多这样的例子。

这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。

二、允许网页宽度自动调整

"自适应网页设计"到底是怎么做到的?其实并不难。

首先，在网页代码的头部，加入一行viewport元标签。

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

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器(主要是IE6、7、8)，需要使用css3-mediaqueries.js。

<!--[if  lt IE 9]>

<script  src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

三、不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

四、相对大小的字体

字体也不能使用绝对大小(px)，而只能使用相对大小(em)。

body {

font: normal 100% Helvetica, Arial, sans-serif;

}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {

font-size: 1.5em;

}

然后，h1的大小是默认大小的1.5倍，即24像素(24/16=1.5)。

small {

font-size: 0.875em;

}

small元素的大小是默认大小的0.875倍，即14像素(14/16=0.875)。

五、流动布局(fluid grid)

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {

float: right;

width: 70%;

}

.leftBar {

float: left;

width: 25%;

}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。

另外，绝对定位(position: absolute)的使用，也要非常小心。

六、选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 400px)"

href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于400像素(max-device-width: 400px)，就加载tinyScreen.css文件。

<link rel="stylesheet" type="text/css"

media="screen and (min-width: 400px) and (max-device-width: 600px)"

href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

七、CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

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

.column {

float: none;

width:auto;

}

#sidebar {

display:none;

}

}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动(float:none)、宽度自动调节(width:auto)，sidebar块不显示(display:none)。

八、图片的自适应(fluid image)

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs =  document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

(完)

文章来源：阮一峰的博客

2015-2016网页设计趋势分析 Web Design of Trends

2015-2016网页设计趋势分析 Web Design of Trends，接触网页也有5个年头了，弯路走了不少，有付出必有回报，有得到必有所失，放眼世界，网页设计其实很美妙，它带着一个梦想。

近一年基本没做过国内的网站，基本都是国外网站，自己对某些趋势的把握还是有一定的想法的，虽然不能算是很厉害很完善，到时候会补充完善趋势分析咯，先把以前归纳的简洁版的文字放出来：）

因为有些东西真的不知道怎么去配图，更好的就用文字来描述，有点小懒，呵呵，有机会的时候会补充。这里我就专门精简的概括就好了，点明重点即可！

接触网页设计也有5个年头了，我也只是刚出头的菜鸟，我很努力，我爱走弯路，我不在乎圈子是个什么，跟着自己的梦想走。

接触过游戏网页，酷炫动感的，FLASH的，HTML5的，SVG的，扁平化的，WIN8风格的，拟物场景的，oh,no，不是单纯接触，应该是这些类型都做过，作品杂七杂八，但是也一路跟着自己的梦想走来，多的不说啦，正题开始：

网上很多各种杂七杂八的趋势分析过的我就不列出来了，都是重复的没啥意思，感觉2016年、未来2年内有这些趋势存在，希望对设计师们有一定的研究方向！

1.传感器访问赋予页面对用户环境的感知能力

很多年以来，web 页面掌握的用户情况十分有限，通常只有用户的屏幕尺寸以及浏览器类型等。但现在各种 W3C 标准把环境光、麦克风、摄像头等各种传感器数据都提供出来了。这使得网站可以跳出页面之外掌握更为丰富的信息。

2.信息推送

让网站可以保持与用户的连接—哪怕用户关闭了网站的浏览器标签页，使用一些新的w3c新标准技术。比如可以使用websocket，还有其它标准技术实现信息推送的体验。

3.SVG图形和动画

以优越的处理性能和动画性能，加载速度，不言而喻它比png,jpg,gif效率质量都高太多。

我自己主要使用SVGDeveloper这款工具结合jquery做动画，因为用的是mac系统，这款工具要使用虚拟机parallels desktop来配合mac系统运行

4.超快用户体验 

“离线优先”，HTML5应用类缓存

网页的浏览速度和等待时间就不用多说了，非常重要。

5.智能响应

根据用户点击等等而响应内容，而不是仅仅根据设备分辨率响应，所以这里说的智能响应并不仅仅指响应式布局Responsive Layout.

比如：当你是新用户开始浏览文章时，会有在线FAQ的表单来响应你的操作，反之，在你登陆后阅读一篇文章的时候，会有标注功能让你更好的对文章进行整理方便下次阅读。

比如Medium和The Next Web在阅读体验上做得就非常棒。

6.ServiceWorkers

可让网站安装 JavaScript 文件，让web原生应用化，离线推送，这就类似一个基于WEB的半原生，甚至就是原生APP的实现。

7.360全景+视频交互

使用HTML5技术生动的360全景展示，视频内置于其中，形成完美的场景交互，让网站完全趋向真实场景。

这种体验将摄影，技术，表现力，特效，音效等方面结合起来，在FWA上看到过几个网站

8.基于HTML5的交互

比如碎片、离子、NDA、电影特效等运用到全屏轮播，tab切换，登陆注册弹窗等模块中。

9.PJAX的普及

最早应该是体验在behance和pinterest这两个网站上，然后慢慢流行到了国内，比如花瓣，接着是前不久dribbble的瀑布流和查看作品的改版体验，利用HTML5的特性结合完全/局部刷新实现改变网址无刷新加载，同时满足SEO的需求。

10.CSS3动画将更加广泛

现在做国外的设计基本不用考虑IE9以下了，也就是说基本不用考虑IE，所以很好的运用CSS3动画能大大提高网站的视觉舒适程度，特别是细节动画，小小的细节动画可能会是点睛之笔哦。

是不是看了这些感觉怎么都是PC端的趋势？NO,NO，其实移动端也同时存在这些趋势，移动不仅仅使用APP这个词去衡量的，现在APP的技术门槛越来越低，满大街都是，和卖白菜一样，参差不齐，基于移动端的体验趋势，也是非常重要的。

移动端的一些常见趋势就不说了，谷歌百度一大堆，再增加一点：

11.web移动端的PC效果移植

我们在PC网站上很常见视差，滚轮侦听，滑出等交互效果，使用HTML5的一些新特性，使用国外开源的移动框架，可以将PC上酷炫的效果同样移植到移动端上，体验会大不一样。

如果大家感兴趣，可以到我的酷站收藏夹直接看带有这些趋势的网站：酷站入口

好了，暂时说到这些，希望对大家有研究的价值，欢迎大家回访我的中文博客：没位道

Adobe Press Responsive Web Design with Adobe Photoshop 免积分下载

For a couple of decades now, designers have used Photoshop to mock up Web page designs. However, that work generally results in a static graphic of the page, which has to be translated by a developer into the components of a Web page: HTML files and Web-compatible image files.

Our multi-device world has shown us that this approach to web design, including full-page comps done in Photoshop, is increasingly problematic. Modern web designers are adopting a new approach: creating flexible web pages whose layout can adapt to suit the screen on which they are displayed. This is “Responsive Web Design” [RWD].

Until now, books on designing responsive Web sites have focused on HTML and CSS – in other words, they''ve been very code-centric, and visual creativity seems to take a back seat.
This new book is aimed at the visual Web designer who’s accustomed to working in Photoshop. Adobe Photoshop CC contains many new features that help streamline the process of converting a static page design to a set of components for a responsive web page.

Dan Rose is one of the best-known advocates of this new way of working in Photoshop. He’s observed that only a few people are talking about Photoshop for RWD constructively, yet a majority (63% as of his last informal poll) of web designers are using Photoshop for more than simple asset creation. This transition is a pain point for many designers.

His new book will balance coverage of conceptual issues (how to fit tools like Photoshop to the design workflow rather than fitting a workflow to the tools) with practical design exercises tailored to help communicate the overall design direction of the page while respecting the needs of the fluid Web. In addition, he will introduce methods for taking HTML back into Photoshop for further refinement.

Table of Contents

Chapter 1 Photoshop’S New Groove
Chapter 2 How Did We Get Here?
Chapter 3 The Case For Designing In The Browser
Chapter 4 A Plea For Photoshop–Browser Harmony
Chapter 5 Vetting Direction
Chapter 6 Establishing Style
Chapter 7 Establishing The System
Chapter 8 Getting Back Into Photoshop With Page Layers
Chapter 9 Extracting Your Way Out Of Photoshop
Chapter 10 Extending Photoshop
Chapter 11 Remembering Etiquette
Chapter 12 Adopting A Completely New Workflow

下载地址：Adobe Press Responsive Web Design with Adobe Photoshop.pdf

更多免积分电子书，请访问：IE布克斯网

Bootstrap使用响应式设计(Responsive design)时导航条上部有空白的解决方案

Mobile Web Design 移动网页设计介绍

随着移动上网设备越来越多，Web设计领域里又多了一个新的分支：Mobile Web Design。我们也可以把它作为一个动词，表示为移动设备进行优化设计。

下面通过实例看一下Mobile Web Design的价值所在：

没有为移动设备专门设计的网页：

专门为移动设备设计和优化过的网页：

 

好吧，再看一下移动设备下的淘宝网站：

其他的例子我就不再列举了。我相信大家得出的结论是一致的，那就是经过专门设计和优化的网页可用性和易用性更高。为移动设备设计和优化网站将随着移动上网设备的增多显得越来越重要，而大家是否准备好了？

今天关于自适应网页设计和Responsive Web Design的介绍到此结束，谢谢您的阅读，有关2015-2016网页设计趋势分析 Web Design of Trends、Adobe Press Responsive Web Design with Adobe Photoshop 免积分下载、Bootstrap使用响应式设计(Responsive design)时导航条上部有空白的解决方案、Mobile Web Design 移动网页设计介绍等更多相关知识的信息可以在本站进行查询。

本文标签：

• 自适应网页设计
• Responsive_Web_Design
• 代码
• Web开发