css - 媒体查询与使用“%”有何不同？

Question

我知道媒体查询用于创建响应式布局。

然而，它们似乎是多余的；我们不能实现我们需要的一切%吗？

Answer 1

使用帮助定义布局，%创建流畅的布局，而不是响应式布局。

媒体查询可帮助您为不同的屏幕尺寸定义不同的样式集。

同样使用媒体查询，您不必仅限于身高和体重，您可以控制的不仅仅是尺寸。

下面的示例为不同的屏幕尺寸创建不同的背景：

@media only screen and (min-width: 320px) {
   body { 
      background: red;
   }
}

@media only screen and (min-width: 780px) {
   body { 
      background: blue;
   }
}

能%做到吗？ 不

Answer 2

基于百分比的布局是流动的——其组件的宽度可以随着视口大小的变化而变化。然而，这并没有让他们做出反应。

响应式布局在不同的视口大小上应用了不同的 CSS。例如，两个具有 50% 宽度且在视口较大时彼此相邻浮动的块可能会更改为具有 100% 宽度并在视口较小时彼此堆叠。