媒体查询最初是为响应式Web设计的，这意味着网站可以根据设备类型和屏幕尺寸来定制布局。例如，一个网站的不同页面可以根据屏幕尺寸而有不同的大小和布局。现在，媒体查询已经扩展到更多的应用场景，如移动应用程序、虚拟现实和增强现实、移动游戏等。
媒体查询使用了一个称为“media”的属性，它描述了查询所支持的媒体类型。例如，使用“@media mediatype”指令可以定义一个媒体查询，其中mediatype指定了媒体类型，例如“screen”或“print”。这个指令后面的“?”号表示查询是否适用于所有的媒体类型，如果不是，那么就会返回一个布尔值。
媒体查询的布局可以使用多种方式实现，例如使用Flexbox布局，或使用Grid布局。使用媒体查询布局的优点在于，它可以为不同的设备和屏幕尺寸提供不同的布局，从而使网站在不同的环境中都能保持良好的用户体验。
媒体查询不仅可以用于响应式设计，还可以用于非响应式设计。例如，一个网站可以根据用户的设备尺寸和分辨率来定制布局，这样即使网站在不同的设备上访问时，布局也不会出现太大的差异。
媒体查询是一种非常重要的CSS技术，可以用于响应式设计和非响应式设计，从而实现良好的布局和用户体验。随着技术的不断进步，媒体查询的应用场景也在不断扩展，未来它将在许多新的应用场景中得到更广泛的应用。