响应式网页设计的九个基本原则
新闻来源：优漫教育
日期：2021-08-07
响应性网页设计是解决多类型屏幕问题的一个很好的方案，但是从网页设计培训学校的角度来看，它还存在着许多困难。不会有固定的版面大小，没有毫米或英寸，没有任何物理限制，让人感觉无从下手。
构建网页的各种插件越来越多，像素设计仅限于桌面和移动端也已成为历史。所以，网页设计培训学校与其对流畅性网页体验的抵触，现在就让我们解释如何使用所有的基本原理来实现它。为简化起见，我们将重点放在布局上。
响应性设计vs适应设计。
看起来同样也不是。两者的设计是相互补充的，所以说也没有对错之分。细节要视内容而定。
信息流。
当屏幕变小时，内容所占据的垂直空间也在增加，也就是说，内容向下延伸，即称为内容流。假如您习惯于使用像素和点来设计，可能会觉得有些难以掌握。但是没关系，习惯了就很好理解。
相关单位。
您设计的对象可能是台式桌面，或者移动端界面，或是介于这两者之间的任意屏幕。像素密度也是彼此不同的，因此我们需要使用可灵活变化且能适应各种情况的单位。这样，百分比等相关单位就派上用场了。在使用百分比时，我们说宽度50%是指宽度占屏幕大小(或叫视区，即您打开浏览器窗口的大小)的一半。
断点。
断点可以使页面布局在预设的点变形，即在台式桌面上显示3条，而移动设备上只显示1条。多数CSS属性可以在断点间实现变形。中断点的位置通常取决于其内容。例如，如果要替换某个句子，则可能需要添加断点。但是，在使用断点时需要小心——如果不能明确内容之间的逻辑关系，很容易弄得一团糟。
最高与最低限度。
有时内容占据了整个屏幕(比如在移动设备上)是很好的事情，但是如果同样的内容出现在电视屏幕上，看起来也很不合理。所以要有一个最大/最小值。举例来说，如果宽度是100%，最大宽度是1000px，那么屏幕的宽度不超过1000px。
嵌入对象。
记住相对位置是什么？一大堆要素彼此紧密相连，必然难以控制。所以，把素放进容器里的话，会使它们更好地被理解，而且简明明快。这个场景需要使用静态单元，如像素。对于不需要扩展的内容，例如logo和按钮，静态单元是很有用的。
手机优先还是桌面优先？
从小屏幕入手过渡到大屏幕(移动优先)，或者从大屏幕开始过渡到小屏幕(台式桌面优先)，严格来说，没有什么不同。然而，从移动设备开始工作会给你带来一些额外的限制来帮助你做决定。一般来说，每个人都同时着手做两件事，所以你还是要看看哪种方法更适合你。
网页字体vs系统字体。
希望你的网页有炫酷的Futura或者Didot效果吗？这是使用web字体的方法。虽然web字体看上去很炫酷，但是要记住，这些字体需要用户下载，文字越多，页面加载所用的时间就越长。而另一方面，系统字体的加载速度要快得多(只要使用一台电脑就行)，但是太过普通。
位图vs向量图。
图标是否有太多的细节，网页设计培训学校并应用了许多华丽的效果？如有，请使用位图。否则，考虑使用矢量图。向量图更好地使用SVG或图标字体。但是你要时刻记住图标的大小——未经优化的图片不会在网上传播。相反，矢量图通常比较小，但是有一部分老浏览器可能不支持矢量图。另外，如果图标有大量的曲线，有可能会大于位图，所以要谨慎选择。
