建站百科

       
编者注：打造流畅的响应式体验！今天跨屏网（网站建设）分享了一篇来自国外的关于响应式的好文章。借助动态图形，列出了传统设计和跨屏设计之间的差异。它直观且易于理解。提到的9个原则都非常实用，值得学习。
响应式网页设计是解决多类型屏幕问题的一个很好的解决方案，但从打印的角度来看，它有很多困难。没有固定的页面尺寸，没有毫米或英寸，没有令人感到不知所措的物理限制。随着可用于构建网站的小工具的数量不断增加，像素设计对桌面和移动设备的限制已成为过去。那么，现在让我们解释一下如何应用响应式网页设计的基本原则来实现而不是抵制流畅的网页体验。为了简单起见，我们将重点关注布局。当然，跨屏设计远不止于此。如果想进一步了解，可以来这里：跨屏网（网站建设）http://www.kuaping.com/
跨屏设计与自适应设计
它们可能看起来相同，但事实并非如此。这两种设计方法是相辅相成的，因此没有对错之分。具体情况要看内容。

内容流
随着屏幕尺寸越来越小，内容占据的垂直空间越来越多，这意味着内容会向下延伸。这就是所谓的内容流。如果您习惯使用像素和点进行设计，您可能会发现这有点难以掌握。不过没关系，习惯了就很容易理解了。

相对单位
您的设计可能适用于桌面、移动屏幕或介于两者之间的任何屏幕类型。像素密度也会彼此不同，因此我们需要使用灵活且能够适应各种情况的单位。在这种情况下，百分比等相对单位就派上用场了。当使用百分比时，当我们说宽度为50%时，意味着该宽度占据屏幕尺寸（或视口，指打开的浏览器窗口的尺寸）的一半。

断点
跨屏网（网站建设）告诉你，断点可以使页面布局在预设点变形，即在桌面上显示3列，在移动设备上只出现1列。大多数 css 属性都可以在断点之间进行转换。断点放置的位置通常取决于内容。例如，如果一个句子需要换行，则可能需要添加断点。但使用断点时需要小心——如果不理解内容之间的逻辑关系，很容易搞乱。

较大和较小的值
有时，内容占据屏幕的整个宽度（例如在移动设备上）是一件好事，但如果相同的内容也适合电视屏幕，那么将其填满似乎是不合理的。这就是为什么有更大/更小的值。例如，如果宽度为 100%，最大宽度为 1000px，则内容将以不超过 1000px 的宽度填充屏幕。

嵌套对象
还记得相对位置吗？如果大量因素相互密切相关，就很难控制。因此，将元素放入容器中可以使它们更易于理解和简洁。在这种情况下，需要使用静态单位，例如像素。静态单元对于不需要扩展的徽标和按钮等内容非常有用。

移动优先或桌面优先
严格来说，项目是从小屏幕开始过渡到大屏幕（移动优先），还是从小屏幕开始过渡到小屏幕（桌面优先），区别不大。但是，从移动设备开始可能会给您带来一些额外的限制，有助于您做出决策。通常人们会同时从两个方面入手，所以你还是要看看哪种方法更适合你。

网络字体与系统字体
您希望您的网站具有炫酷的 futura 或 didot 效果吗？然后使用网络字体。虽然网页字体看起来很酷，但你必须记住，这些字体需要用户下载，而且字体越多，用户加载页面所需的时间就越长。另一方面，系统字体加载速度要快得多（前提是用户在本地拥有它们），但太常见了。

位图与矢量
您的图标是否有很多细节并应用了很多华丽的效果？如果是这样，则使用位图。如果没有，请考虑使用矢量图形。如果是位图，请使用 jpg、png 或 gif。对于矢量图形，最好使用 svg 或图标字体。每个都有其优点和缺点。但您应该始终牢记图标大小 - 未经优化的图像无法在线发布。另一方面，矢量图像通常较小，但某些较旧的浏览器可能不支持矢量图像。另外，如果图标有很多曲线，它可能比位图大，所以要明智地选择。

以上内容由跨屏网向您提供。如有遗漏，请留言！

写在最后，以上就是对于“响应式网页设计的 9 个基本原则”的一些看法，欢迎指正、交流。