响应式网页设计是解决多屏幕问题的一个很好的方法，但从印刷的角度来看，它有点困难。没有固定的页面大小，没有毫米或英寸，没有物理限制，没有办法开始。为了桌面和移动设备，仅仅像素设计已经成为过去，因为越来越多的设备可以打开网站。因此，我们需要明确响应式网页设计的一些基本原则，接受而不是反对它。为了保持简单，我们将查看布局（是的，responsive比它更复杂，如果您想了解更多，这是一个很好的开始）。
他们看起来是一样的，但事实并非如此。这两种方法是相辅相成的，不能说哪个是对的，哪个是错的。
1内容决定一切。随着屏幕尺寸变小，内容将占据更多的垂直空间，下面的内容将被向下推，这称为流。如果你用像素和磅来设计的话，这可能会很棘手，但是当你习惯的时候，这是有意义的。
2画布大小可以是桌面移动或两者之间的任何大小。像素密度也可以变化，所以我们需要灵活的单位，可以在各种屏幕上使用。这是相对单位（如百分比）派上用场的时候。因此，将宽度设置为50%意味着它占据了屏幕的一半（或视图，一个打开的浏览器窗口的大小）。
3断点允许在预定义点更改布局。例如，桌面屏幕上有三列，而移动设备上只有一列。大多数CSS属性都可以基于断点进行更改。通常根据具体内容设置断点。如果一个句子超过了屏幕长度，你可能需要给它添加一个断点。但是使用断点需要谨慎——当很难理解什么影响了什么时，它会很快导致混淆。
4有时候，如果内容占据了整个屏幕的宽度，比如在移动设备上，那就更好了。但如果是在电视屏幕上，同样的内容占据了整个屏幕的宽度，通常意义不大。此时最小值开始起作用。例如，如果宽度设置为100%，宽度为1000px，则内容将填满屏幕，但不会超过1000px。
5记得相对位置吗很难根据其他元素来控制许多元素的位置，因此用容器包装元素会使它们更容易理解和更干净。这时静态单位（如像素）开始发挥作用。它们对于您不想模块化的东西很有用，例如徽标或按钮。
6从技术上讲，如果一个项目从一个较小的屏幕开始，变成一个较大的屏幕（首先是移动屏幕），或者反之亦然（首先是桌面屏幕），这并没有多大区别。不过，它增加了额外的限制，帮助您决定是否先从移动开始。我们通常在开头把两端写在一起，让我们看看哪个更好。
7你想在你的网站上有很酷的Futura还是didot字体你可以使用页面字体！尽管它们看起来很棒，但请记住，输入的字体越多，加载页面所需的时间就越长。另一方面，加载系统字体的速度非常快，但是当用户在本地没有这组字体时，它将返回默认字体。
8你有没有想过给图标添加很多细节和奇特的效果如果你想，使用位图。如果不是，考虑使用矢量图形。
9对于位图，使用JPGPNG或GIF格式的图像，而对于矢量图像，SVG或图标字体是一种选择。各有利弊。但是图像的大小也需要注意——页面上的图像必须优化。另一方面，矢量图形通常很小，但一些旧的浏览器不支持它们。此外，如果它有许多曲线，它可能比位图重。所以，要慎重选择。
