由于越来越多的设备可以打开网站，因为desktop和mobile单独使用像素设计已经成为过去。因此，我们需要找出响应性网页设计的一些基本原则，接受流体网页，而不是与之抗衡。为了保持简单，我们将关注布局（是的，响应比它更复杂，如果你想知道更多，这是一个很好的开始。

它们看起来一样，但事实并非如此。这两种方法相辅相成，没有说哪个是对的，哪个是错的，内容决定一切。

随着屏幕尺寸的减小，内容将占据更多的垂直空间，下面的内容将被推下，这就是所谓的流动。假如你是用像素和磅来设计的，那可能有点棘手，但是当你习惯了，就会变得很有意义。

画布的大小可以是desktop、mobile或它们之间的任何尺寸。像素密度也可以不同，所以我们需要灵活的单位，可以在各种屏幕上使用。这是相对单位(如百分比)派上用场的时候了。因此，设置50%的宽度意味着它将占据屏幕的一半(或视图，即打开的浏览器窗口的大小)。

断点允许在预定义点改变布局。例如：desktop屏幕上有三列，但mobile上只有一列。大多数CSS属性可以根据断点改变。通常你会根据具体内容设置断点。如果一个句子超过了屏幕的长度，你可能需要给它添加一个断点。但是使用断点需要谨慎——当它很难理解什么会影响什么时，它可能会很快导致混乱。

有时候，如果内容占据了屏幕的整体宽度，比如移动设备。但如果是在电视屏幕上，同样的内容占据了你屏幕的整体宽度，通常意义不大。现在是Min/Max值发挥作用的时候了。例如，如果设置width为100%，然后max-width为1000px，则内容将填充屏幕，但不超过1000px。

还记得相对位置吗？很难控制许多元素的位置依赖于其他元素，因此使用容器包裹元素可以使其更容易理解和清洁。这是静态单位(如像素)发挥作用的时候了。它们对你不想模块化的内容(如logo或按钮)很有用。

从技术上讲，如果一个项目从一个小屏幕变成一个大屏幕(mobile优先)，或者反过来(desktop优先)，差别不大。然而，它增加了额外的限制，可以帮助你决定是否从mobile开始。通常大家一开始都会在两端一起写，所以还是看哪个运行比较好。

希望你的网站上有很酷的Futura或Didot字体吗？可使用网页字体！虽然它们看起来很棒，但记住字体放得越多，加载页面的时间就越长。另一方面，加载系统字体确实像闪电一样快，但当用户没有本地字体时，它会返回默认字体。

你有没有想过在图标上添加很多细节和花哨的效果？如果你想过，使用位图更合适。如果没有，可以考虑使用矢量图。对于位图，使用jpg、png或gif格式的图像，对于矢量图，更好的选择是SVG或图标字体。每一个都有相应的优缺点。但是图片的大小也需要注意——网页上的图片需要优化。另一方面，矢量图通常相对较小，但一些旧浏览器不支持。另外，如果有很多曲线，也可能比位图重。因此，慎重选择。

网站设计title=怎么样做好响应式网站设计>

美好未来首创1对1项目负责制，项目经理专人全程负责。我们为您提供网站建设优化解决方案，互联网品牌建设与网络营销，设计、技术开发、网站和SEO优化行业的技术和数据支持服务、营销推广等服务。为您的企业获取网络流量，挖掘精准客户，达到更高的销售指标。是您的企业提升产品销量最好的伙伴。