设计教程

响应性的Web设计：关键技巧和方法

1096

前一段时间，设计师的工作，他们委托做的，无论是一本书的封面，海报，报纸，等知道确切的尺寸

然而，智能手机，iPad和其他显示器不同大小，长宽比和决议的出现，我们已经失去了我们的视觉边界的控制。

这并不奇怪，响应性的Web设计（RWD）已经成为新的时髦。这个趋势是不是关于时尚美学，而不是试图解决由于用于浏览互联网的各种设备的可用性问题。

在这篇文章中，我将介绍的方法使用不同的设备在设计时，应该考虑什么样的屏幕尺寸和分辨率，以及如何从一个设计师的角度来看，RWD的工作。

响应性的Web设计方法

当创建一个网站，适用于所有的监控屏幕上，最常用的方法是在标准屏幕宽度和高度的设计。目前，在监视器屏幕的标准尺寸为1024像素×760像素，这意味着网络安全区域应该是小于-它是由548px 989px。

99designs基于网络安全的矩形电流的标准的最小大小的桌面监视器内的主页。

如果网站是一个更大的显示器上，页面布局会表现出更多的背景。超过90％的设计的网站使用这种方法，但它是不太相关的，当我们为移动设备设计的。你根本不能使用相同的布局320px【2000px屏幕。

这里有一些其他的设计为不同的设备时使用的方法：

媒体查询：CSS使页面样式（包括隐藏内容）的网站上显示该设备的特点的基础上。页面造型是最常用的基于浏览器的宽度。

的流体网格：页面元素时，在相对的（％）单位的尺寸和网格的列的数量的变化取决于上的宽度限制。

最流行的技术是基于对流体网格 - 它是原来的主张为RWD应该如何工作的，它得到了Adobe的支持。在最新版本的Dreamweaver，你可以使用一个流体的模板，以自动的方式来创建和编辑布局。

兰开斯特大学的网站没有内容断面宽度960px扩大，但规模下降整齐低于400像素。请注意，在上面的内容如何逐渐减少，滚动-注意以下420px的页面宽度的变化。

移动设备的屏幕分辨率（和挑战时，针对他们）

有几十个图形显示分辨率。下表是网页设计师的一些最重要的设备：

正如你可以看到，有各种不同的尺寸和分辨率（每英寸的像素定义）。的分辨率（PPI）是一个重要的因素 - 例如，iPhone 5上的图标的大小将是桌面显示器上显示时的4倍大。

有剪裁内容，以更小的尺寸时，我们面临的挑战。因此，这里有几件事情要记住：

保持可读：一个14px的高度2000像素宽屏幕的文本行，将缩减为2px上一个300像素宽屏幕-你就不能读它。在另一侧，缩放比例为10像素高达7倍的文本将被不合理地大。我们需要保持合理的，可读的，印刷的比例在每个设备上的可用屏幕宽度调整我们的布局。

保持可浏览： 重要的是要避免过多的滚动-大量的内容推入1列，让网页很长，使得它很难获得所需的内容。

保持它tappable： 手机屏幕支持触摸和人的手指通常被用来处理-所以，按钮不能太小。据苹果公司称：舒适的tappable UI元素的最小尺寸是44×44像素。此限制是经常被打破，真正的估计上限大约是25像素。

现在，我们知道如何实现可读的，可浏览和tappable的的接口，让我们来看看我们需要做的，创建一个具有响应性的设计。

重点提示，同时创建一个具有响应性的Web设计

记住，创建一个具有响应性的Web设计时，有一些重要的事情。这里有几个重要的：

一个网页设计应该至少有3个版本，不同的浏览器宽度： 320px【480像素，480像素768px，768px +。之间的宽度，你的内容可以自由扩展，你可以保持3个固定的布局。有3个（或更多）固定的布局，增加利润，在必要时通常更容易设计和实现比流体缩放。然而，流体结垢可能会提供更好的更大范围内的数量的设备的经验。

在具体决议的内容保持可见：例如，你可以选择隐藏文章的主要部分，降低整个箱子一个按钮，或者完全隐藏内容。

要知道的CSS约束：设计的方式，让尽可能多的页面元素的纯CSS。这是很重要的原因有二：它允许更多的灵活性，当调整大小的页面元素，并减少加载时间。大多数设计师，这是不容易的，因为他们可能不熟悉CSS。它的意思是避免使用覆盖模式以外的其他“正常”（除非该层可以合并），使用简单的阴影和渐变。

使用相同的内容完全一样的HTML的所有决议：换句话说，我们应该使用和重复使用相同的图形元素的所有版本的页面。通常情况下，我们希望创造最大的屏幕，然后减少为较小的决议的元素，如果需要的话。

除了这些关键点，RWD是一个问题，你的想象力和编码器的技能。在下面的例子中，检查出RWD可以做不同的方式。

响应网页设计的例子

叉是一个惊人的典型混合流体缩放一个固定的布局。有4个固定的布局（块元素的大小以像素为单位设置）。我们只看到流体波背景的div缩放。你可以看到，当你缩放页面上方770px。请注意，如何将内容隐藏在这里发生。

丹尼尔叶片的个人网站 -一个很好的使用的流体平方米的模块化电网。它填补了100％，无论大小的屏幕。在较小的屏幕视图，如768px，从5列3列布局。低于480像素，它变成1列。

“波士顿环球报”（Boston Globe）网站是一个大的新闻网站，设计一个负责任的一个罕见的例子。它使用HTML5的样板框架，它的流体网格，根据比例尺寸。应该指出的是流体网格并不意味着无限流体缩放。对于本网站的例子中，最大的页面是1232px，最低为422px的。

列数更改为620px，800px，但波士顿环球报“的样式表定义了以上2个条件（媒体查询）。更深入的分析表明，此页面简单，乍看之下拥有约30调整到了以下决议：1400px，1300px，1220px，1210px，1200px，1150px，1100px，1050px，1024px，980px，960px，950px，931px的变种，900px，860px，809px，810px，800px，788px，768px，760px，640px，639px，620px，600px的，540px，500像素，481px，480像素，380px。