作为Web开发人员,我们经常需要创建具有响应能力和丰富媒体的应用程序。具备这些要求意味着我们需要使用图像断点以及媒体查询,因为我们希望为最终用户提供最佳体验。除了需求列表以外,我们可能还需要使用前端框架(例如Angular),该框架非常适合创建SPA和其他应用程序类型。
在本文中,我们将研究图像断点,它们的用例以及整个动手示例。我们将使用Angular自己的BreakPoint Observer在Angular应用程序中实现它们。在使用这种方法时,我们还将重点介绍为什么这个流行的框架可以帮助我们无缝地使用上述技术。
图像断点和响应图像
在响应式布局时代(我们根据视口大小并根据断点捕获断点,然后更改页面的布局),我们还需要确保即使在布局之后,也可以以正确的尺寸显示图像更改。对于现代的响应式网站,选择正确的图像非常具有挑战性。
让我们讨论一下开发人员目前可以使用的两个选项。