响应式网页设计是针对多萤幕问题的一个很好的解决方案，但从印刷的视角来看有点困难。没有固定的页面尺寸，没有毫米或英寸，没有任何的物理限制，无从下手。为了 desktop 和 mobile 单独使用画素设计的方法也成为了过去，因为越来越多的装置都可以开启网站。因此，WordPress 网站建设觉得需要我们需要弄清楚响应式网页设计的一些基本原则，接受流体网页，而不是与之相抗。

1. 响应式 vs 自适应网页设计

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

2. 内容流动

随着萤幕尺寸变小，内容将会占据更多的垂直空间，而下方的内容就会被接着往下推，这就是所谓的流动。如果您是使用画素和磅来进行设计的，这可能会有点棘手，但是当您习惯了之后，就会变得很有意义了-WordPress 网站设计认为！

3. 相对单位

 画布大小可以是 desktop 、 mobile 或是它们之间的任何尺寸。画素密度也可以有所不同，所以我们需要灵活的、在各种萤幕上都可以使用的单位。这就是相对单位（如百分比）派上用场的时候了。所以设定 50% 的宽度也就意味着它会占据萤幕（或检视，即开启的浏览器视窗的尺寸）的一半。

4. 断点

断点允许布局在预定义的点改变。例如：desktop 萤幕上有 3 列，但是在 mobile 上只有一列。大多数 CSS 属性可以根据断点改变。通常您会根据具体的内容来设定断点。如果一个句子超过了萤幕长度，您可能就需要为其新增一个断点。但是使用断点是需要谨慎——当它很难理解什么内容会影响什么内容的时候，它可能会迅速地导致混乱。

5. 大值和小值

有时候，如果内容占据了萤幕的整个宽度是很好的，比如在移动装置上。但是如果是在电视萤幕上，相同的内容，占据了您的萤幕整个的宽度，通常就意义不大了。这就是 Min/Max 值发挥作用的时候了。比如说，设定 width 为 100%，然后 max-width 是 1000px，那么内容会填满萤幕，但是不会超过 1000px 。

6. 巢状物件

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

7.Mobile 优先 还是 Desktop 优先

从技术上讲，如果一个专案是从一个较小的萤幕开始，变成较大的萤幕（mobile 优先），还是反过来（desktop 优先），并没有太大的差别。然 而它还是增加了额外的限制，可以帮助您决定是否从 mobile 优先开始。通常大家在一开始的时候都会两端一起写，所以，还是看看哪个执行起来更好。

8. 网页字型 vs 系统字型

希望您的网站上有很酷的 Futura 或 Didot 字型吗？可以使用网页字型！虽然它们看起来非常棒，但是记住字型放得越多，您载入页面的时间也会越长。在另一方面，载入系统字型确是快如闪电，但当多用户本地没有这套字型时，它就会返回预设的字型。

9. 点阵图 vs 向量图

    您是否想过在图示上新增很多的细节和花哨的效果？如果想过的话，使用点阵图比较合适。如果没有，可以考虑使用向量图。对于点阵图，使用的是 jpg 、 png 或 gif 格 式的影象，而对于向量图，知名的选择是 SVG 或图示字型。每个都有对应的优势和缺点。但是图片的大小也需要重视——网页上的图片必须经过优化。另一个方 面，向量图通常比较小，但是一些旧版的浏览器不支持。此外，如果它有很多曲线的话，它也可能会比点阵图要重。所以，慎重选择。