Responsive Web Design_Responsive 教程

作者：大漠日期：2012-11-24 点击：4487

上次花一天的时间写了一篇《Responsive设计的十个基本技巧》，在这篇文章中主要向大家介绍了Responsive设计的十个基本技巧，其中涉及的面也非常的广，一时理解或者说学习起来还是有一定的难度。有些初次听过Responsive的或者初次接触Responsive的同学还是有点难度，为了能帮助大家进一步的了解和学习Responsive，今天我为大家整理了一篇《Responsive Web Design》，这篇文章主要从几个内容引导大家如何学习Responsive设计。希望对大家有所帮助。

对于今天而言，大家常见的固定布局、自适应布局，都是一种反应迟钝的Web设计，并不一种优秀的Web设计。换过话来说，如果你不能接受内在适应性的Web页面（此处的内在适应性网页是指，你的Web页面能自动的适应各种设备的显屏，并且能够轻构的实现内容在不同设备的显示与否），你就不是一位优秀的Web设计师。那么此时大家会问？那么我们是不是真的有必要学好Responsive设计呢？如果让我来回答，那是肯定的。就当今的信息科技，我们制作出来的Web页面不在是仅停留在当初的PC设备上，而且随着移动端的高速发展，使用移动端设备访问Web页面的用户群体会越来越多，也就是说，当初制作的Web页面无法满足用户的需要了，这时在大家都需要一种设计，让你的Web页面能在各种设备显屏上都得到最好的渲染。如此一来,Web页面的未来就是Responsiv设计。

一、Responsive的优势

扯了这么多，很多人肯定会问？Responsive究竟有什么优势呢？根据我个人对Responsive设计的学习，我总结了一下（总结的不好之处希望大家多多指点）：

一个Web页面能适应各种显屏；
较大的缩短了开发者开发网站的周期；
具有良好的SEO功能，易于google搜索；
给用户更多的选择。

知道了Responsive设计的优势，你是否有一种想深入的冲动呢？如果你有的话，我建议你花点时间继续往下阅读，我想你会有所收获的。

二、Responsive的术语

在学习Responsive设计时，有几个术语大家很有必要先了解一下，因为这几个术语是Responsive设计中很关键的部分，了解他们，对于学习Responsiv设计会有很好的帮助。

1、流体网格(Fluid Grids)

流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是能让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。

扩展阅读：

2、弹性图片（Flexible Images）

弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情：

img {
  max-width:100%;
}

如果在reset.css样式中直接重置了的话，要非常小心，因为上面的样式会在IE8中存在一个严重的问题，让你的图片不会显示，所以最好在样式中为IE8浏览器重新设置过一个样式，以免造成图片不显示。

当然除了上述简单的方法之外，还可以使用一个相对复杂的方法，使用图片img的自定义的“data-”属性来实现图片在不同设备的显屏下的图片文件。

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

那么我们要样式中可以这样使用，以达到弹性图片的设置：

@media (min-device-width:600px) {
  img[data-src-600px] {
    content: attr(data-src-600px, url);
  }
}

@media (min-device-width:800px) {
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

扩展阅读：

3、CSS3 Media Queries

Media早在CSS2中就有，但Media Queries在CSS3中得到了强大的扩展。这个属性能让你在制作Web页时根据用户的设备判读不同的样式文件。简单的说，他可以根据浏览器窗口的大小，方向、屏幕规格选择对应的样式文件。这也是Responsive设计中最关键的一个应用。

简单的可以看看下面的示意图：

这个时候可能会问？如何设置其中的尺寸临界点呢？这方面不用害怕，有人整理过了，我也收集了一些关于Media Queries的模板，感兴趣的可以点击这里。

扩展阅读：

4、屏幕分辨率（Screen Resolutions）

屏幕分辨率从字面上大家应该很好理解，简单点说就是用户显示器的分辨率，深一点说，屏幕分辩率指的是用户使用的设备浏览您的Web页面时的显屏分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。从前面的Media Queries得知，Responsive设计利用Media Queries属性针对浏览器使用的分辨率来选择对应的CSS样式文件。因此屏幕分辨在Responsive设计中是一个很重要的东西，因为只有你知道了你的Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式文件。

5、主要断点（Major breakpoint）

主要断点，大家对于这个词来说应该是陌生的，在Web开发中，很少有听到过这个词，我也是最近才听到的，并做了一个简单的了解。前面在介绍Media Queries时，有人应该在想，其中的min-width和max-width对应的属性值是怎么来的。其实我们的断点就是为他们服务的。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。我截了几个关键图，用来帮大家了解断点与Media Queries的关系

上图简单的告诉我们，这里有三个主要断点，每个断点调用了一个不同的样式文件？那么我们如何来确定主要断点和次要断点呢？继续看下图：

上图告诉我们，一个style.css样式文件运用在我们的Web页面中，但这个样式文件包括了所有风格的样式代码，也就是说所有设备下显示的风格都通过这个样式文件下载下来。当然我们还可以使用另外一种方法，也就是在不同的断点加载不同的样式文件，如下图所示：

这样主要的断点直接就影响了Web的主要布局，如图所示：

上图中的（P=portrait）、（L=Lndscape）、（L*=landscae w/ native viewport adaptions）。

我们还可以在上面的主要断点上做一定的细化：

在这张示意图上，很明显的可以看出，除了三个主要断点，还在这个基础上添加了三个次要断点，服务于另外三种情况下的分辨率布局效果。除此之外，还可以继续细化：

正如大家所看到的，虽然在主要断点的基础上增加了许多次要断点，但还是会存在一定的风险，如下图所示：

此时或许你会思考，有那么多的未知尺寸，为了适应这些不同分辨率浏览器的显示，我们有必要添加那么多的次要断点？或者说设置这么多断点，值得？这上问题让大家去思考，因为我无法找到答案。

通过对Responsive优势和常用术语的了解后，我们对Responsive多少有些了解，但你是否有想过下面几个问题呢？要是你没有想过，我觉得我们很有必要的做下来起一下，然后思考一下，最好还能进行碰撞一下，这样大家对Responsive设计才有更深的了解。

一、Adaptive和Responsive的PK

Adaptive就是我们常说的自适应布局，使用这种布局就是我们常见的百分比布局，他能让你的布局在不同的分辨率下适应其大小，但这种布局往往我们需要一个最小宽度来辅助实现，不然在一定尺寸下，整个布局就会出现问题，简单点说，这种布局也是让你的列设置了一个固定值，只不过这个固定值不是“px”而是“%”。Responsive是一个多列的流体布局，其利用Media Queries来实现Web页面在不同分辨率下达到完美的呈现形式。从页面展现的效果，往往给人造成的视觉误差就是，Responsive就是自适应布局，这也是常常有人说Responsive是一种自适应布局，但当你真正了解了他与自适应布局的差别后，你就会完全改变这种看法。有关于他们两者详细的对比，你要是感兴趣的话，可以狠狠的点击ADAPTIVE AND RESPONSIVE WEBSITE DESIGN，你会了解的更清楚些。

二、有用的EM宽度

em是css是的另一个度量单位，其和font-size有很大的联系，那么这个em单位，和Responsive扯上什么样的关系呢？简单点说，em值比px值做为Responsive的断点会更有灵活性。他能让你的断点根据不同的字号大小来相对调整其值，比如说，“body”的“font-size”为默认的16px时，断点值可以：

20em  =  20 * 16 = 320px
30em  =  40 * 16 = 480px

这个时候，我们的模板就可以换成：

/* ===== == = === 20em (320px) === = == ===== */

@media only screen and (min-width : 20em) {

}

/* ===== == = === 30em (480px) === = == ===== */

@media only screen and (min-width : 30em) {

}

/* ===== == = === 37.5em (600px) === = == ===== */

@media only screen and (min-width: 37.5em) {

}

/* ===== == = === 48em (768px) === = == ===== */

@media only screen and (min-width : 48em) {

}

/* ===== == = === 56.25em (900px) === = == ===== */

@media only screen and (min-width : 56.25em) {

}

/* ===== == = === 68.75em (1100px) === = == ===== */

@media only screen and (min-width : 68.75em) {

}

/* ===== == = === 81.25em (1300px) === = == ===== */

@media only screen and (min-width : 81.25em) {

}

为了让大家对Responsive有一个更好的理解，我引用了几段话：

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Resonsive web design represents a fundamental shift in how we'll build websites for the decade to come.

Jeffrey Veen

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.

Ethan Marcotte

Web design is responsive design,Responsive Web Design is web design, done right.

Andy Clarke

Stop Thinking in Pages. Start Thinking in Systems.

Jeremy Keith

除了他们说的之外，Google也这样建议：

Google recommends webmasters follow the industry best practice of using resonsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

看到这里，你有没有收获？同时你有没有想继续学习Responsive的冲动呢？如果有的话，我在这里为大家推荐一些学习资源：

优秀文章

优秀教程

Responsive技巧

RESPONSIVE IMAGES, RESPONSIVE VIDEOS

Responsive工具

Responsive模板

Responsive框架

Responsive工作流和策略

W3cplus上的Responsive教程与资源

上面这些是我整理的一些教程与资源，希望大家喜欢，更希望这些资源与教程对大家学习Responsive设计能起到实质性的帮助，不过为了随时掌握Responsive设计最新资源和相关案例，我特别推荐两个站点，希望大家今后能观注：

1、RESPONSIVE DESIGN WEEKLY

2、Media Queries

那么有关于Responsive设计，今天就和大家聊到这里，希望今天这篇博文大家喜欢，如果你有更好的资源或者想法，随时欢迎一起探讨，我们后期也会继续为大家推荐一些有关于Responsive相关资源与教程，希望大家继续观注W3cplus相关更新。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/responsive-web-design.html

上一篇: Responsive设计的十个基本技巧 | 下一篇: 【99JS】之三：颜色转换器

w3cplus

Responsive Web Design

一、Responsive的优势

二、Responsive的术语

一、Adaptive和Responsive的PK

二、有用的EM宽度

合作网站

友情链接

关于我们

关于站长

我的作品

w3cplus

你在这里

Responsive Web Design

一、Responsive的优势

二、Responsive的术语

一、Adaptive和Responsive的PK

二、有用的EM宽度

合作网站

友情链接

关于我们

关于站长

我的作品