使用css3的响应式设计

Question

我正在尝试使用媒体查询。我在我的头中包含了meta name=“viewport”content=“width=device-width,initial-scale=1”>并且在我的CSS中包含了@media(min-width：768px）{background-color：red；}。是不是因为这不起作用而让我错过了什么。

Answer 1

您将此标记为使用SASS以及响应式设计，所以我认为提供一个更详细的、面向SASS的答案是合适的，以防将来其他人有相关问题。

首先，@migli所说的一切都是正确的--您必须确保在CSS中针对特定的DOM元素进行样式化。使用SASS的一个主要好处是它允许您保持代码干燥，并且创建断点使编写媒体查询变得超级简单。

为此，请设置一个@mixin来建立特定的断点阈值（例如，下面是Tim Knight提供的一个易于操作的通用示例：

@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: 767px) { @content; }
  }

  @else if $class == sm {
    @media (min-width: 768px) { @content; }
  }

  @else if $class == md {
    @media (min-width: 992px) { @content; }
  }

  @else if $class == lg {
    @media (min-width: 1200px) { @content; }
  }
}  

现在，在编辑SASS文件时，您可以对代码进行分区，以保持其干涸。例如，以下SASS：

body {
  height: 100%;
  width: 100%;
  font-size: 1.8em;
  @include breakpoint(md) {
    font-size: 1.5em;
  }
}  

产出

body {
  height: 100%;
  width: 100%;
  font-size: 1.8em;
}  

@media (min-width: 992px) {
  body {
    font-size: 1.5em;
  }  

这是一个小例子，但随着项目的规模和范围的增长，节省击键和提高可读性将大大提高您的生产力（和理智！）。

Answer 2

您的媒体查询是可以的，但是您的background-color只是一个CSS属性，您必须指定关注哪个元素：

@media (min-width: 768px) {
    html, body {
        background-color: red;
    }
}