响应式网页设计很好的解决了多类型屏幕的问题，但是从印刷的角度来看，有很多难点。没有固定的页面尺寸，没有毫米或英寸，也没有让人感到迷茫的物理限制。随着可用于构建网站的小工具的种类越来越多，仅限于桌面和移动设备的像素设计已成为过去。那么，现在让我们来解释一下如何使用响应式网页设计的基本原理来实现，而不是抗拒流畅的网页体验。为简单起见，我们将重点放在布局上。响应式设计与自适应设计可能看起来相同，但事实并非如此。这两种设计方式相辅相成，没有对错之分。具体情况视内容而定。内容流随着屏幕尺寸越来越小，内容占据的垂直空间越来越大，也就是说内容会向下延伸，这就是内容流。如果您习惯于使用像素和点进行设计，这可能有点难以掌握。不过没关系，习惯了就好理解了。相对单位您的设计对象可能是桌面桌面，也可能是移动屏幕或介于两者之间的任何屏幕类型。像素密度也会彼此不同，因此我们需要使用灵活且适应每种情况的单位。那么在这种情况下，百分比等相对单位就派上用场了。在使用百分比的时候，我们说50%的宽度是指宽度占屏幕尺寸（或viewport，即打开的浏览器窗口的尺寸）的一半。断点断点允许页面布局在预设点扭曲，即在桌面桌面上显示3列，在移动设备上仅显示1列。大多数CSS属性都可以在断点之间进行转换。断点放在哪里通常取决于内容。例如，如果一个句子需要换行，您可能需要添加一个断点。但是在使用断点的时候需要谨慎——如果你搞不清楚内容之间的逻辑关系，就很容易弄得一团糟。***和min值有时候让内容填满整个屏幕宽度很好（比如在移动设备上），但如果同样的内容也填满电视屏幕的整个宽度就显得不合理了。这就是为什么有***/min值的原因。例如，如果宽度为100%，最大宽度为1000px，则内容将填满屏幕，最大宽度为1000px。嵌套对象会记住相对位置吗？如果大量元素彼此密切相关，将难以控制。因此，将元素放入容器中可以使它们更易于理解和简洁。这种情况需要使用像素等静态单位。静态单位非常适合不需要缩放的徽标和按钮之类的东西。移动优先还是桌面优先严格来说，一个项目从小屏幕开始过渡到大屏幕（移动优先），或者从大屏幕过渡到小屏幕（桌面优先）之间没有什么区别。但是，从移动开始可以给您一些额外的限制，以帮助您做出决策。通常人们会同时从两边开始，所以你还是要看哪种方式最适合你。Web字体与系统字体想要给您的网站带来炫酷的Futura或Didot效果吗？那就是使用网络字体。尽管网络字体看起来很酷，但您必须记住，这些字体需要用户下载，字数越多，用户加载页面所需的时间就越长。另一方面，系统字体加载速度更快（前提是用户在本地拥有它们），但过于通用。位图与矢量图形你的图标是否有很多细节并且应用了很多花哨的效果？如果是，则使用位图。如果没有，请考虑使用矢量图形。如果是位图，请使用jpg、png或gif。矢量最好使用SVG或图标字体。每个都有优点和缺点。但是您必须始终牢记图标大小-无法在线上传未优化的图像。另一方面，矢量图形通常较小，但一些较旧的浏览器可能不支持矢量图形。另外，如果图标有很多曲线，它可能比位图大，所以要明智地选择。英文原文：http://c.jinhusns.com/cms/c-850原文链接：http://www.itbbu.com/1369.html
