九大基本设计原则

@Sandijs Ruluks早在2014年就针对响应式设计提出九大基本设计原则。

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

很看起来似乎相同，但事实并非如此。两种方法相辅相成，所以没有对与错之分

内容流

随着屏幕尺寸变小，内容开始占据更多的垂直空间，并且下面的任何内容都会被下推，这称为流。如果习惯于使用像素和点进行设计，那可能很难理解，但是当您习惯使用像素和点进行设计时，这是很有意义的。

相对单位

画布可以是台式机，移动屏幕或介于两者之间的任何内容。像素密度也可能变化，因此我们需要灵活的单元并可以在任何地方工作。这就是相对单位（如百分比）派上用场的地方。因此，设置内容为50％宽意味着它将始终占据屏幕的一半（或视口，即打开的浏览器窗口的大小）。

 其他自适应方案：https://www.cnblogs.com/mzzy/p/11928271.html

 

断点

断点允许布局在预定义的点更改，即在桌面上有3列，而在移动设备上只有1列。大多数CSS属性可以从一个断点更改为另一个断点。通常，放置的位置取决于内容。如果句子中断，则可能需要添加一个断点。但是，请谨慎使用它们-当难以理解是什么在影响什么时，它会很快变得混乱。

最大值和最小值

有时，就像在移动设备上一样，内容占据屏幕的整个宽度非常好，但是将相同的内容延伸到电视屏幕的整个宽度通常会变得毫无意义。这就是为什么Min / Max值有帮助的原因。例如，宽度为100％，最大宽度为1000px，则意味着内容将填满屏幕，但不会超过1000px。

 

嵌套对象

还记得相对位置吗？具有很多彼此依赖的元素将很难控制，因此将元素包装在容器中可以使其更加易懂，整洁。这是像像素这样的静态单位可以提供帮助的地方。它们对于您不想缩放的内容（例如徽标和按钮）很有用。

Mobile优先 还是Desktop优先

从技术上讲，如果项目从较小的屏幕开始到较大的屏幕（移动优先）开始，或者反之亦然（桌面优先）开始，则没有太大区别。但是，如果您先从移动设备入手，它会增加额外的限制并帮助您做出决策。人们经常从两端开始，因此，确实，去看看哪种方法对您更有效。

Webfonts与系统字体

想在您的网站上使用酷炫的Futura或Didot吗？使用网络字体！尽管它们看起来很漂亮，但请记住，每一个都将被下载，并且您下载的内容越多，加载页面所需的时间就越长。另一方面，系统字体的闪电般快，除非用户本地没有它，它会退回到默认字体。

位图图像与矢量

您的图标是否有很多细节并应用了一些奇特的效果？如果是，请使用位图。如果没有，请考虑使用矢量图像。对于位图，请使用jpg，png或gif；对于矢量，最好的选择是SVG或图标字体。每个都有优点和缺点。但是请记住大小-未经优化，任何图片都不能上网。另一方面，向量通常很小，但是某些较旧的浏览器不支持。另外，如果它有很多曲线，则它可能比位图重，因此请明智地选择。