广州响应式网页设计很好的解决了多类型屏幕的问题，但是从打印的角度来看，它有很多困难。没有固定的页面大小，没有毫米或英寸，没有物理限制，让人觉得无从下手。随着越来越多的小工具可用于建设网站，像素设计仅限于桌面和移动已经成为历史。因此，让我们来解释一下如何使用响应性网页设计的基本原则，而不是抵制流畅的网页体验。为简单起见，我们将重点介绍布局。

　　响应性设计与适应性网页设计

　　看起来一样，其实不是。这两种设计方法相辅相成，没有对错之分。具体要看内容。

　　内容流

　　随着屏幕尺寸越来越小，内容占据的垂直空间越来越多，也就是说内容会向下延伸，这就是所谓的内容流。如果你习惯了用像素和点来设计，你可能会觉得这个有点难掌握。不过没关系，习惯了就好理解了。

　　相对单位

　　您的设计对象可以是桌面、移动屏幕或介于两者之间的任何屏幕类型。每英寸像素会互不相同，所以我们需要使用灵活、适应性强的单元。在这种情况下，百分比等相对单位会派上用场。当使用百分比时，我们说50%的宽度意味着宽度占屏幕大小(或视口，即打开的浏览器窗口的大小)的一半。

　　断点

　　断点可以在预设点使页面布局变形，即在桌面上显示3列，在移动设备上只显示1列。大多数CSS属性可以在断点之间转换。断点的位置通常取决于内容。例如，如果要换行，可能需要添加断点。但是，应该小心使用断点。如果搞不清内容之间的逻辑关系，很容易搞得乱七八糟。

　　最大值和最小值

　　有时候内容占据整个屏幕宽度是好事(比如在移动设备上)，但是如果同样的内容在电视屏幕上也是满的，那就显得不合理了。所以才有最大/最小值。例如，如果宽度为100%，最大宽度为1000px，内容将以不超过1000px的宽度填充屏幕。

　　嵌套对象

　　还记得相对位置吗？如果大量的元素彼此紧密相关，就很难控制。因此，将功能放在容器中会使它们更容易理解和简洁。这种情况下，需要像素等静态单位。静态单元对于不需要扩展的东西非常有用，比如logo，按钮。

　　移动优先还是桌面优先严格来说，从小屏幕过渡到大屏幕(移动优先)或者从大屏幕过渡到小屏幕(桌面优先)差别不大。但是，从移动端开始可以给你带来一些额外的限制，帮助你做决定。通常人们会同时从两个方面入手，所以你还是要看哪种方法最适合你。

　　网页字体与系统字体

　　想让你的网站有一个酷的未来或迪多特效应？那就是用网页字体。虽然web字体看起来很酷，但是你要记住这些字体是需要用户下载的。单词越多，用户加载页面的时间就越长。另一方面，系统字体加载速度要快得多(前提是用户本地有)，但是太普通了。

　　位图与矢量图

　　你的图标有很多细节和很多华丽的效果吗？如果是这样，请使用位图。如果没有，考虑使用矢量图。如果是位图，使用jpg，png或gif。矢量图最好用SVG或者图标字体。各有利弊。但是你要时刻记住，图标大小为——的图片，不经过优化是无法上传到网上的。另一方面，矢量图形通常很小，但是一些旧的浏览器可能不支持矢量图形。另外，如果图标有许多曲线，它可能比位图大，所以明智地选择。