【转载】响应式网页设计的9条基本原则

响应式网页设计是针对多屏幕问题的一个很好的解决方案，但从印刷的视角来看有点困难。没有固定的页面尺寸，没有毫米或英寸，没有任何的物理限制，无 从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去，由于愈来愈多的设备均可以打开网站。所以，咱们须要弄清楚响应式网页设计 的一些基本原则，接受流体网页，而不是与之相抗。为了让它保持简单，咱们将着眼于布局（是的，响应式比它更复杂，若是你想了解更多，这是一个很好的开端。）

响应式 vs 自适应网页设计

它们看起来彷佛是相同的，但事实并不是如此。这两种方法相辅相成，并无说哪一个是正确的那个是错误的，内容决定一切。

内容流动

随着屏幕尺寸变小，内容将会占据更多的垂直空间，而下方的内容就会被接着往下推，这就是所谓的流动。若是你是使用像素和磅来进行设计的，这可能会有点棘手，可是当你习惯了以后，就会变得颇有意义了。

相对单位

画 布大小能够是desktop、mobile或是它们之间的任何尺寸。像素密度也能够有所不一样，因此咱们须要灵活的、在各类屏幕上均可以使用的单位。这就是 相对单位（如百分比）派上用场的时候了。因此设置50%的宽度也就意味着它会占据屏幕（或视图，即打开的浏览器窗口的尺寸）的一半。

断点

断 点容许布局在预约义的点改变。例如：desktop屏幕上有3列，可是在mobile上只有一列。大多数CSS属性能够根据断点改变。一般你会根据具体的 内容来设置断点。若是一个句子超过了屏幕长度，你可能就须要为其添加一个断点。可是使用断点是须要谨慎——当它很难理解什么内容会影响什么内容的时候，它 可能会迅速地致使混乱。

最大值和最小值

有 时候，若是内容占据了屏幕的整个宽度是很好的，好比在移动设备上。可是若是是在电视屏幕上，相同的内容，占据了你的屏幕整个的宽度，一般就意义不大了。这 就是Min/Max值发挥做用的时候了。好比说，设置width为100%，而后max-width是1000px，那么内容会填满屏幕，可是不会超过 1000px。

嵌套对象

还记得相对位置吗？让不少元素的位置依赖于其它元素来定位是很难控制好的，所以使用容器来包裹元素可让它更易理解，也更整洁。这就是静态单位（好比像素）发挥做用的时候了。对于你不想要模块化的内容（好比logo或按钮），它们是有用的。

Mobile优先 仍是Desktop优先

从 技术上讲，若是一个项目是从一个较小的屏幕开始，变成较大的屏幕（mobile优先），仍是反过来（desktop优先），并无太大的差异。然 而它仍是增长了额外的限制，能够帮助你决定是否从mobile优先开始。一般你们在一开始的时候都会两端一块儿写，因此，仍是看看哪一个运行起来更好。

网页字体 vs 系统字体

但愿你的网站上有很酷的Futura或Didot字体吗？可使用网页字体！虽然它们看起来很是棒，可是记住字体放得越多，你加载页面的时间也会越长。在另外一方面，加载系统字体确是快如闪电，但当用户本地没有这套字体时，它就会返回默认的字体。

位图 vs 矢量图

你 是否想过在图标上添加不少的细节和花哨的效果？若是想过的话，使用位图比较合适。若是没有，能够考虑使用矢量图。对于位图，使用的是jpg、png或 gif格 式的图像，而对于矢量图，最好的选择是SVG或图标字体。每一个都有对应的优点和缺点。可是图片的大小也须要重视——网页上的图片必须通过优化。另外一个方 面，矢量图一般比较小，可是一些旧版的浏览器不支持。此外，若是它有不少曲线的话，它也可能会比位图要重。因此，慎重选择。

以为咱们遗漏了什么重要的内容？在评论里给咱们留言吧！

本文根据@Sandijs Ruluks的《9 basic principles of responsive web design》所译，整个译文带有咱们本身的理解与思想，若是译得很差或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://blog.froont.com/9-basic-principles-of-responsive-web-design/。