1.3　响应式设计四大原则

本节介绍一下响应式设计所需要遵循的一些基本原则，归纳起来一共有4个方面，具体如下：

●　移动优先还是PC优先

●　内容流

●　位图还是矢量图

●　相对单位还是固定单位

1.3.1　移动优先还是PC优先

随着移动互联网的发展，很多小型创业企业甚至没有了自己的网站，只有一个APP应用。在这个时代，网站项目是从小屏幕入手过渡到大屏幕（移动优先），还是从大屏幕入手过渡到小屏幕（PC优先），成为企业考虑的首要问题。

传统的大企业改造型网站，大部分是从大屏幕逐步过渡到小屏幕，而且在过渡到小屏幕时会碰到一些额外的限制，比如没法在第一页面显示更多的内容，要更简洁，具体到要放哪些标签都是需要决策的内容。

在新兴的创业公司中，通常情况下都会从两方面同时着手，所以具体哪个优先还是要看哪种方式最适合。

1.3.2　内容流

随着移动屏幕尺寸越来越小，内容所占的垂直空间越来越多。也就是说，内容会向下方延伸，这被称为“内容流”。早先的Web设计师习惯了使用像素和点来设计页面，可能会觉得这有点难以掌握。不过好在它很简单，多多练习就习惯了。图1.4展示了两种设计状态下页面内容变宽后的效果。

1.3.3　位图还是矢量图

我们知道，当一张图片被放大后就会出现比较“虚”的情况，这种图是位图，而放大后不变“虚”的则是矢量图。先来了解一下两者的概念。

矢量图使用线段和曲线描述图像，所以称为矢量，同时图形也包含了色彩和位置信息。

位图使用像素（一格一格的小点）来描述图像，计算机屏幕其实就是一张包含大量像素点的网格。在位图中，图像由每一个网格中的像素点的位置和色彩值来决定，每一点的色彩是固定的，所以放大后观看图像时，每一个小点看上去就像是一个马赛克，这就是我们常说的“虚”。

在响应式设计中，图标或图像都会涉及这个问题。如果我们的图标有很多细节，并且应用了很多华丽的效果，就用位图；否则，考虑使用矢量图。如果是位图，使用jpg、png或gif；矢量图则最好使用SVG或图标字体。位图和矢量图两者各有利弊。矢量图通常比较小，很适合移动端来展示，但部分比较老的浏览器可能不支持矢量图。另外，有些图标有很多曲线，可能导致它的大小比位图还大，所以需要根据实际情况明智取舍。

1.3.4　相对单位还是固定单位

对于设计师而言，我们的设计对象可能是桌面屏幕，也可能是移动端屏幕，或者介于两者之间的任意屏幕类型。不同的终端像素密度也会不同，所以我们需要使用灵活可变且能够适应各种设备的单位。

传统的设计单位有px、pt、cm等，但它们都是固定单位，没法实现跨平台展示。那么，在这种情况下，百分比等相对单位就到了发挥作用的时候了。使用百分比时，我们所说的宽度50%是表示宽度占屏幕大小（或者叫视区，即所打开浏览器窗口的大小）的一半，如图1.5所示。