流体网格和媒体查询之间的区别

2 回答

• 1

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

  它的一切都是一样的 .

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

  要么

  视口在css中根据设备宽度加载

  @viewport {
  width: device-width;
  }
  

  基本上是接近布局的最简单方法，如果简单的方法是使其流畅/ 100％宽度，并且您需要更多自定义添加这样的媒体查询

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

  它的所有css，比如通过检测浏览器/浏览器大小/浏览器类型/设备/设备宽度来加载一组不同的css文件 .

  没有规则！

  回复于 2024-05-02T14:08:40+08:00
• 3

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

  你必须了解一些历史才能理解这一点 . 固定网格系统排在第一位，最受欢迎的设置是：960px宽度分为12或16列 . 这些演变成流体网格系统 . 当它们被创建和使用时，显示分辨率范围从1024px到1920px，其目的是为这个相对较小的分辨率范围带来一些灵活性 . 网格系统（固定或流体）最重要的作用是为您的布局/设计提供结构基础 .

  媒体查询是为更广泛的分辨率范围创建的 - 从移动设备，平板电脑到等离子屏幕 . 它们在RWD中的主要目标是检测设备的类型并为每个设备提供替代样式 .

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

  使用这两种技术的问题是：想象一个300px宽的屏幕分为16列（在16列网格系统中） . 列变得非常狭窄 .

  那么，解决方案是什么？现代和响应式网格系统可以将列组堆叠在一起（使用媒体查询） . CSS类也可用于更改列数，或隐藏布局的某些元素，具体取决于设备（使用媒体查询检测到） . 这两种不同的技术可以一起使用，为布局（网格系统）带来结构，并提供各种设备（媒体查询）的最佳用户体验 .

  回复于 2024-05-02T14:08:40+08:00