媒体查询与使用“%”有何不同？答案

【问题标题】：How are media queries different from the use of "%"?媒体查询与使用“%”有何不同？
【发布时间】：2013-03-14 10:47:25
【问题描述】：

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

但是它们似乎是多余的；我们不能使用% 来实现我们所需要的一切吗？

【问题讨论】：

标签： css layout responsive-design

【解决方案1】：

使用% 定义布局有助于创建流畅的布局，NOT RESPONSIVE 布局。

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

还有媒体查询，您不必局限于身高和体重，您可以控制的不仅仅是尺寸。

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

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

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

% 可以这样做吗？ 没有

【讨论】：

【解决方案2】：

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

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

【讨论】：