我对响应式网页设计非常陌生，所以请原谅我提出这个愚蠢的问题。 我必须建立一个现有的桌面网站来进行响应式设计。谷歌搜索后，我发现了两种方法 - 流体网格和媒体查询。但是，我很困惑我应该遵循哪种方法，或者我是否需要同时使用这两种方法来开发响应式网站。 根据我的理解，流体网格用于根据不同的视口显示网页，但媒体查询用于根据不同大小的浏览器中可用的房间放置不同的内容（图像、文本）（手动或从手机/平板电脑缩小浏览器） /桌面浏览器）。如果我在这里遗漏了什么，请纠正我。
感谢您的帮助！
【问题讨论】：
标签： html css responsive-design media-queries fluid-layout
基本上，流体网格系统会在较小的分辨率范围内为您提供一些灵活性，但要创建适用于各种设备的响应式布局，您必须使用媒体查询。您使用网格系统主要是为您的布局提供结构。响应式网格系统可以使用媒体查询和网格系统。这是两种不同的技术，具有不同的目标。
您必须了解一些历史才能理解这一点。固定网格系统首先出现，最流行的设置是：960px 宽度分为 12 或 16 列。这些演变成流体网格系统。在创建和使用它们时，显示分辨率范围从 1024px 到 1920px，它们的目的是为这个相对较小的分辨率范围带来一些灵活性。网格系统（固定的或流动的）最重要的作用是为您的布局/设计提供结构基础。
为更广泛的分辨率范围创建了媒体查询 - 从移动设备、平板电脑到等离子屏幕。他们在 RWD 中的主要目标是检测设备类型并为每个设备提供替代样式。
没有一种解决方案可以同时使用网格系统和媒体查询，因为它们有不同的主要目标。
使用这两种技术的问题是：想象一个 300 像素宽的屏幕分为 16 列（在 16 列网格系统中）。列变得很窄。
那么，解决方案是什么？现代和响应式网格系统可以将列组堆叠在一起（使用媒体查询）。 CSS 类也可用于更改列数，或根据设备隐藏布局的某些元素（使用媒体查询检测）。 这两种不同的技术可以一起使用，为布局（网格系统）带来结构，并为各种设备（媒体查询）提供最佳用户体验。
【讨论】：
你要明白的是，所有响应式布局总是使用 css 来调整页面大小。
最后都是一样的。
媒体查询检测浏览器的大小并加载额外的 css。
或
基于设备宽度的 css 中的视口加载
@viewport {
width: device-width;
}
基本上是最简单的布局方法，如果它简单的话就是让它流动/100% 宽度 并且当您需要更多自定义时，添加这样的媒体查询
@media screen and (min-width: 960px){
your css in here
}
它都是 css，就像通过检测浏览器/浏览器大小/浏览器类型/设备/设备宽度来加载一组不同的 css 文件。
没有规则！
【讨论】：