响应式网站设计的9个基本原则

  响应式网页设计是我们多屏幕问题的一个很好的解决方案，但是从打印的角度来看，它是困难的。没有固定的页面大小，毫米或毫米，没有物理限制来对抗。随着越来越多的小工具可以打开网站，Google桌面和手机的设计也是过去的。因此，让我们澄清一下响应式网页设计的一些基本原则，以便拥抱流畅的网络，而不是与之相冲突。为了保持简单，我们将专注于布局。
  响应对比自适应网页设计
  它可能看起来一样，但不是。这两种方法相互补充，所以没有对错的方法。让内容决定。
   流量
  随着屏幕尺寸变小，内容开始占据更多的垂直空间，下面的任何东西都会被推下来，这被称为流程。如果您习惯于使用像素和点进行设计，那么抓握可能会很棘手，但是当您习惯使用它时，可能会很有意义。
   相对单位
  画布可以是桌面，移动屏幕或其间的任何东西。像素密度也可以有所不同，所以我们需要灵活的单位，无处不在。那就是百分比相对单位派上用场。所以做一些50％的宽度意味着它总是占用一半的屏幕（或视口，这是打开的浏览器窗口的大小）。
   断点
  断点允许布局在预定义点更改，即在桌面上具有3列，但在移动设备上只有1列。大多数CSS属性可以从一个断点更改为另一个断点。通常你放在哪里取决于内容。如果一个句子中断，您可能需要添加一个断点。但是请谨慎使用它们 - 当很难理解什么是影响什么时，它可能会很快发生。
   最大值和最小值
  有时，内容占用屏幕的整个宽度，如在移动设备上，但是具有延伸到电视屏幕的整个宽度的相同内容通常不那么有意义。这就是为什么Min / Max值有帮助。例如，宽度为100％，最大宽度为1000px将意味着内容将填满屏幕，但不要超过1000px。
   嵌套对象
  记得相对位置吗？相互依赖的许多元素将难以控制，因此将容器中的元素包裹起来更容易理解，干净整洁。这就是像像素这样的静态单位。它们对于您不想缩放的内容（如徽标和按钮）很有用。
   移动或桌面
  从技术上来说，如果一个项目从较小的屏幕开始到更大的（首先移动的），反之亦然（桌面式），则没有什么区别。然而，它增加了额外的限制，并帮助您做出决定，如果您首先从移动开始。人们通常从两端开始，所以真的，去看看什么对你更好。
   网页字体与系统字体
  想要在您的网站上看到一个很酷的Futura或Didot？使用网页字体虽然他们会看起来很惊艳，但请记住，每个都将被下载，您将拥有的越多，加载页面所需的时间就越长。另一方面，系统字体是闪电般快速的，除非用户在本地没有，否则会退回到默认字体。
  位图图像与矢量图
  你的图标有很多细节和一些花哨的效果吗？如果是，请使用位图。如果没有，请考虑使用矢量图像。对于位图使用jpg，png或gif，对于矢量，最佳选择将是SVG或图标字体。每个都有一些好处和一些缺点。但请记住大小 - 没有图片应该在没有优化的情况下上网。另一方面，向量通常很小，但是一些较老的浏览器将不支持它。另外，如果它有很多曲线，它可能比位图重，所以选择明智。