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