响应式网站设计的几个认识误区

现在很多人每天都会使用移动设备(平板、手机等)浏览网站，在看到网页无法适应小屏幕时，人们常常选择退出、放弃浏览。响应式设计就是在这种情况下应运而生的，它正逐渐成为网站设计的主流形式之一，但是我们是否真的懂响应式网站设计?据不完全统计，不少人对响应式网站设计都存在着以下6个误解，只有解开这些"心结"，我们才能够在网站设计的过程中有效避免，才能做出一个更加用户友好的响应式网站，发挥网站在吸引顾客、促进产品销售等方面的作用。接下来就和小飞一起看看吧!

　　响应式网站设计等于移动端优化

　　由于现在移动互联网发展迅速，手机网站十分火热，各种移动设备推动了响应式网站设计的产生，很多人在做响应式网站设计时只考虑移动端，认为响应式网站等同于移动端优化。其实响应式设计同移动端优化是截然不同的，移动端优化一般是指网站针对手机站特别优化过 ，而响应式网站设计的目的就在于使网页适应任何屏幕，任何比例和宽度的互联网产品。在响应式网站中虽然移动端效果很重要，但它并不是唯一的，我们也还想到大屏幕的设备。而且随着视网膜显示屏和视频游戏浏览器的兴起，很多用户开始在更大的屏幕分辨率下浏览网页，用户上网的情景越发多样。

　　因此，在设计响应式网站时，我们最好能将用户不同的使用环境也考虑进去。想想用户现在可能正使用什么样的设备进行浏览：是手机还是家里内嵌浏览器的智能电视或机顶盒?想想用户现在可能在哪?是在零售店排队还是在野外露营?虽然我们一直强调内容是王道，但使用情景也很重要，它直接的决定了用户采取哪种设备上网，潜移默化的对用户的浏览行为产生影响。这也是为什么响应式网站的内容需要完美适用不同的屏幕分辨率。所以记住：响应式网站并不仅仅是移动网站，并不等同于移动端优化。

　　响应式设计不必适用于所有用例

　　过去人们常常争论说每个用例(简单来说，就是对系统功能的描述)都有各自的特点，响应式网站设计并不是对每个用例都有效，这是个很明显的误区，因为用例事实上是响应式网站的重点，网站设计师或开发者必须考虑到每一个用例，并且尽可能测试用例的所有设备，最优化网站布局，这样才更能给用户提供良好的浏览体验，用户才更可能热衷于我们的网站。不将这一点牢记于心，是很难做好响应式网站的。

　　响应式设计只关注设备断点

　　在响应式网站中，我们是通过媒体查询的方式改变网站的布局，在哪种宽度下改变布局，这就是我们常说的断点。在进行响应式网站设计时，很多设计师都习惯于针对某些设备的数据来设置断点，最常见的3种设备当然是电脑(台式/笔记本，平板，手机)，这样一来设计出来的就是针对某些设备分辨率的网站。这并不可取，因为屏幕尺寸是靠不住的，它会随着科技的发展和人们的喜好不断变化，举个栗子来说，我们的上网习惯已经从使用台式电脑发展到手机再到今天的智能手机，屏幕由大到小又再次变大，所以我们不应该只根据屏幕大小、设备的分辨率设置断点。只注重设备断点，一旦某个设备的屏幕尺寸发生变化，我们就需要及时修改网站布局，这种过程耗时又耗力。

　　那么断点应该怎样设置呢?在设置断点之前我们要明白一点，做响应式网站是为了让网站内容对所有用户可见，而不是只针对某个设备的用户。所以，断点最好根据网站的内容设置，当我们的内容在达到一个零界点时，比如视觉效果不够美观或者影响了网站内容的传递分享，这就是我们想要的断点。 但是在纯粹的视觉设计阶段，我们可能无法判定内容在什么时候会达到临界点，因此最好的方法是将网站内容与现有的设备相结合确立一个断点，绝不能只关注设备的断点。

　　响应式设计可以隐藏网站内容

　　与其他类型的网站相比，响应式网站通常会有比较少的空间用来放置文本和图片(同时考虑电脑端和移动端)，因此一些站长在做响应式网站时会将网站的部分内容隐藏起来。有人认为这是可取的，但只要仔细想一下你就会知道这个错误很明显，响应式设计是为了让网站内容更容易可见，如果我们隐藏网站内容，那为什么还要设计响应式网站呢?而且，我们假设某个内容或部分是可以隐藏的，我们主观的认为用户不需要这个信息，这可能会给用户带来极其糟糕的体验，那所谓不重要的东西用户也许非常看重。所以针对空间比较少的问题，应该怎么办呢?其实我们可以通过添加导航链接或锚链接的方式重新合理安排网站内容，使用多种工具保证网站内容的可读性。另外，小飞要说明一点，通过CSS布局控制隐藏的内容在用户进行浏览时仍然会被加载，那为什么不提供完整的用户体验呢?网站内容在任何设备应该都是统一的，千万不要限制用户在某个设备上可以获得的信息。

　　响应式设计扼杀了网站表现力

　　响应式网站可以适用于多种终端(电脑、手机、pad等)，这是它的优势所在，但有些人认为这也是响应式设计的缺点，因为需要同时兼顾移动端和客户端，在很多方面(个性化设计或性能能等方面)会有很大的局限性，这严重影响了网站的表现力。不可否认，现在很多设计都开始变得相似，版式布局基本一致，图片来源大同小异，潮流趋向基本相同，Bootstrap与Foundation的流行甚至使得很多设计师直接套用一模一样的代码库、风格 。但是，即使使用的工具和资源相差无几，如何发挥扩大网站的表现力的关键还在于我们自己。

　　我们可以通过调整图像排列方式、使用独特元素(如使用六边形代替方形)、插画元素、缩略图等来让自己的网站脱颖而出(下图就是一个很好的栗子)。让小飞在这给所有人一个统一的解决方案并不现实，因为不同的网站目的不同，适合的表现形式也不同， 我们应该找找哪种方式更适合自己的网站，更能够扩大自己网站的表现力。从某个程度上来说，响应式体现的是一种高度适应性的设计思维模式。在探索响应式设计的道路上，响应式本身并不是唯一目的，基于任意设备对页面内容进行完美规划的设计可能更是我们的课题。现在你还要说响应式设计扼杀了你网站的表现力吗?

　　响应式设计影响排版

　　响应式网站中的排版也是一个很让人头疼的问题，就像我们上面说的，在设计师选择根据移动等设备设置断点时，遇到不适合的设备时网站内容可能就无法很好的显示出来，网站排版就会"遭殃"。所以不少人都觉得响应式网站上的文字排版很有难度，甚至有些人认为在响应式网站上就做不好排版。其实，做好网站的排版并没有想象中那么困难，一方面，我们应该注重网站的内容，内容是王道。我们应该致力于怎样让用户更快速、更容易得到信息，保证内容的可读性，同时记住响应式网站的设计应该结合内容和设备来设置断点。

　　另一方面，响应式网站就是关于如何恰当布局的问题。在这点上，ems是一个很好的工具。"Ems"(em)是网页媒体文档的一个度量单位，我们可以使用它设置字体、内外边距来合理规划网站排版，增强网站内容的可读性。这是因为ems是一个可缩放的相关单位，它可以根据父级元素的字体大小进行相对应的缩放，这意味着不管字体增大还是缩小，网站的布局也会相应的进行调整，排版不会有任何变形。由于其可伸缩性和适应移动设备的特性，ems在web文档中正变得越来越受欢迎。

　　下面是关于ems的一个栗子，假设这有两个结合内容和设备设置的断点，一个是高分辨率的电脑，另一个是小屏幕的平板电脑。一个ems等于当前的字体大小，例如，基本字体是16px，1em就等于16px，为了在3840*2160分辨率的电脑上更好的浏览，我们将基本字体增大到22px，同样，在800*600分辨率的平板电脑上，我们将基本字体减小到14px。现在两个设定断点(一大一小)上网站的布局已经完全改变了。在分辨率比较大的电脑上显示的网站上，1.4em的标题，基本字体22px，这意味着1.4em等于30.8px，但在分辨率较小的平板电脑上，1.4em的标题，基本字体14px，这里1.4em等于19.6px。从这可以看出em在本质上是可伸缩的，尽管网站字体已经变成大或变小，我们都无需担心网站布局的破坏，因为它会随着字体的变化适当进行自我调整。只要我们好好利用这些相对单位，响应式网站设计的整体布局和排版就可以很美观。