Html 流体网格和介质查询之间的差异

我对响应式网页设计非常陌生，所以请原谅我这个愚蠢的问题。 我必须建立一个现有的桌面网站，以响应设计。在谷歌搜索之后，我发现了两种方法——流体网格和媒体查询。然而，我不知道我应该遵循哪种方法，或者我需要使用这两种方法来开发响应性网站。 据我所知，Fluid grid用于根据不同的视口显示网页，但媒体查询用于根据不同大小的浏览器（手动或通过手机/平板电脑/桌面浏览器）中的可用空间放置不同的内容（图像、文本）。如果我遗漏了什么，请纠正我

---

谢谢你的帮助

您必须了解的是，所有响应性布局都始终使用css来调整页面大小

结果都一样

媒体查询检测浏览器的大小并加载其他css

或

基于设备宽度在css中加载视口

@viewport {
width: device-width;
} 

如果布局简单的话，最简单的方法就是使布局流畅/100%宽度 当您需要更多的定制时，可以添加这样的媒体查询

@media screen and (min-width: 960px){
your css in here
}

它都是css，就像通过检测浏览器/浏览器大小/浏览器类型/设备/设备宽度加载一组不同的css文件一样

---

没有规则

基本上，流体网格系统将在较小的分辨率范围内为您提供一定的灵活性，但要创建适用于各种设备的响应性布局，您必须使用媒体查询。网格系统主要用于为布局提供结构。响应网格系统可以使用媒体查询和网格系统。这是两种目标不同的技术

你必须了解一些历史才能理解这一点。固定网格系统最先出现，最流行的设置是：960px宽，分为12或16列。这些进化成了流体网格系统。当它们被创建和使用时，显示分辨率从1024px到1920px不等，其目的是为这个相对较小的分辨率范围带来一些灵活性。栅格系统（固定或流体）最重要的作用是为布局/设计提供结构基础

媒体查询的分辨率范围更广，从手机、平板电脑到等离子屏幕。他们在RWD中的主要目标是检测设备类型，并为每个设备提供可选样式

由于网格系统和媒体查询具有不同的主要目标，因此没有一种解决方案可以同时使用它们

使用这两种技术的问题是：想象一个300px宽的屏幕分成16列（在16列网格系统中）。柱子变得很窄了

那么，解决方案是什么？现代且响应迅速的网格系统可以将一组列堆叠在彼此的顶部（使用媒体查询）。CSS类还可用于更改列数，或根据设备隐藏布局的某些元素（使用媒体查询检测）。

---

这两种不同的技术可以结合使用，将结构整合到布局（网格系统）中，并为各种设备（媒体查询）提供最佳的用户体验。

我的原始问题仍然没有得到回答：（其中senerio我将使用流体网格布局，其中senerio我将使用媒体查询，其中senerio我将同时使用两者。答案不是这样或那样的情况……阅读此线程