Responsive网站建设设计对于各种类型的屏幕来说是一个很好的解决方案，但是从排版的角度来看，它有很多困难。没有固定的页面大小，没有毫米或英寸，没有物理限制，这让人感到沮丧。随着越来越多的小工具可用于构建网站，像素设计仅限于桌面和移动设备。那么现在让我们来解释一下如何使用响应式网页设计的基本原则，而不是抗拒流畅的网页体验。为简单起见，我们将重点放在布局上。

1.响应式设计与适应性设计　

看起来一样，其实不然。两种设计方式相辅相成，没有对错之分。具体情况视内容而定。

2.内容流

随着屏幕尺寸越来越小，内容占据的垂直空间越来越大，也就是内容会向下拉伸，这叫做内容流。如果您习惯于使用像素和点进行设计，您可能会发现这有点难以理解。但没关系。一旦你习惯了它就很容易理解。

3.相对单位

您可以针对桌面、移动屏幕或介于两者之间的任何屏幕类型进行设计。每英寸的像素也会彼此不同，因此我们需要使用能够适应各种情况的灵活单位。那么在这种情况下，百分比等相对单位就派上用场了。使用百分比时，我们说宽度为50% 表示宽度是屏幕（或视口，即打开的浏览器窗口的大小）大小的一半。

4.断点　

断点可以在预设点扭曲页面布局，即在桌面上显示三列，在移动设备上只显示一列。大多数CSS 属性都可以在断点之间进行转换。在哪里放置断点通常取决于内容。例如，如果一个句子需要换行，您可能需要添加一个断点。但是断点需要谨慎使用。 —— 如果搞不清楚内容之间的逻辑关系，很容易搞砸。

　5.最大值和最小值

有时内容占据屏幕的整个宽度（例如在移动设备上）没问题，但如果相同的内容占据了电视屏幕的整个宽度就没有意义了。这就是为什么应该有一个最大/最小值。例如，如果宽度为100%，最大宽度为1000px，则内容将填满屏幕，最大宽度为1000px。

6.嵌套对象

还记得相对位置吗？如果许多元素密切相关，则很难控制。因此，将元素放在容器中可以使它们更易于理解和简洁。在这种情况下，需要像素等静态单位。静态单元格非常适合不需要缩放的内容，例如徽标和按钮。

7.移动还是桌面优先

严格来说，从小屏到大屏（移动优先）或者从大屏到小屏（桌面优先），项目并没有太大区别。但是在手机上牵手会给你带来一些额外的限制，帮助你做出决定。通常人们会从两者开始，因此您可以自行决定哪种方式最适合您。

8.网络字体与系统字体

想要给您的网站一个很酷的未来主义或didot 效果？让我们使用网络字体。虽然网络字体看起来很酷，但您必须记住，所有这些字体都需要用户下载。字数越高，用户加载页面所需的时间就越长。另一方面，系统字体的加载速度要快很多（前提是用户本地有），但是太普通了。

9.位图与矢量图　

你的图标有很多细节和很多华丽的效果吗？如果是，则使用位图。如果没有，请考虑使用矢量图形。对于位图，请使用jpg、png 或gif。 SVG 或图标字体最适用于矢量图形。优点和缺点。但是您应该始终牢记图标的大小—— 未优化的图像无法在线上传。另一方面，矢量图形通常很小，但一些较旧的浏览器可能不支持矢量图形。另外，如果图标有很多曲线，它可能比位图大，所以要明智地选择。

我们专注高端建站，小程序开发、软件系统定制开发、BUG修复、物联网开发、各类API接口对接开发等。十余年开发经验，每一个项目承诺做到满意为止，多一次对比，一定让您多一份收获！