响应式网站设计的9个基本原则。

响应式网页设计很好的解决了多屏问题，但是从印刷的角度来说有点难。没有固定的页面大小，没有毫米或英寸，没有物理限制，无从下手。桌面和移动单独使用像素设计的方法也已经成为过去，因为越来越多的设备可以打开网站。因此，我们需要弄清楚一些响应式网页设计的基本原则，接受流动的网页而不是抵制它们。为了简单起见，我们将重点放在布局上(是的，responsive比它本身更复杂，如果你想了解更多，这是一个好的开始。)

响应式与自适应式网页设计

看似一样，其实不然。两种方法相辅相成，没有说哪个对哪个错。内容决定一切。

内容流

随着屏幕尺寸变小，内容会占据更多的垂直空间，下面的内容会被下推，这就是所谓的流量。如果用像素和磅来设计，可能会有点棘手，但是当你习惯了，就会变得很有意义。

相对单位

画布大小可以是桌面、移动或两者之间的任何大小。每英寸的像素也可能不同，因此我们需要可以在各种屏幕上使用的灵活单元。这就是相对单位(如百分比)派上用场的时候了。所以设置50%的宽度意味着它将占据屏幕(或视图，即打开的浏览器窗口的大小)的一半。

断点

允许布局在预定义的点发生变化。例如，桌面屏幕上有3列，但移动屏幕上只有一列。大多数CSS属性可以根据断点进行更改。你通常根据具体内容设置断点。如果一个句子超过了屏幕长度，您可能需要给它添加一个断点。但是使用断点需要小心& mdash& mdash当很难理解什么内容会影响什么内容时，可能会很快导致混乱。

最大值和最小值

有时，如果内容占据整个屏幕宽度，比如在移动设备上，这是很好的。但如果是在电视屏幕上，同样的内容占据了你屏幕的整个宽度，通常意义不大。这是最小值/最大值发挥作用的时候。例如，如果宽度设置为100%，则最大宽度为1000像素，内容将填满屏幕，但不会超过1000像素。

嵌套对象

还记得相对位置吗？依赖于其他元素很难控制许多元素的位置，所以使用容器来包装元素可以更容易理解和更整洁。这是静态单元(如像素)发挥作用的时候。对于不想模块化的内容(比如logo或者按钮)，它们很有用。

移动优先级或桌面优先级

从技术上来说，一个项目从较小的屏幕开始变成较大的屏幕(移动优先)或者相反(桌面优先)并没有太大的区别。但是，它增加了额外的限制，可以帮助您决定是否先从移动开始。大家一般都是开头两头写，看看哪个更好。

Web字体与系统字体

你想在你的网站上有一个酷的Futura或迪多特字体吗？可以用网页字体！虽然它们看起来很棒，但是记住你放的字体越多，你加载页面的时间就越长。另一方面，加载系统字体确实快如闪电，但是当用户本地没有这套字体时，就会恢复到默认字体。

位图与矢量

你想过给图标添加很多细节和花哨的效果吗？如果你想好了，用位图更合适。如果没有，可以考虑用矢量图。对于位图，使用jpg、png或gif格式的图像，而对于矢量地图，最好的选择是SVG或图标字体。各有利弊。但是图片的大小也需要注意& mdash& mdash网页上的图片必须进行优化。另一方面，矢量图形通常很小，但一些较旧的浏览器不支持它们。此外，如果它有许多曲线，它可能比位图重。所以，慎重选择。