基于宽度的媒体查询是基于整个浏览器窗口的。如果浏览器窗口宽度小于 800px，则执行此操作。如果浏览器窗口宽度大于 400px，则执行此操作。但这并不总是足够。想象一个 1000px 宽度的桌面三栏布局。每列宽 333px。然后，您有一个媒体查询断点在 800px，将其降至两栏布局，第三栏在下面。即使浏览器现在更窄，每列也更宽（400px）。根据列的当前宽度而不是浏览器窗口，为这些列内的模块编写媒体查询会更容易。
Kumail Hunaid 的项目可以帮助解决这个问题。我喜欢这种方法。它向元素添加类名，然后您使用这些类名进行样式设置，因此它非常不显眼。