Question

我知道媒体查询用于创建自适应布局。

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

Answer 1

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

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

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

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

@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％宽度并且在视口较小时堆叠在彼此之上。

媒体查询与“％”的使用有何不同？

2 个答案: