使用 css3 的响应式设计答案

【问题标题】：responsive design using css3使用 css3 的响应式设计
【发布时间】：2017-12-05 01:21:58
【问题描述】：

我正在尝试使用媒体查询。我在脑海中包含了 meta name="viewport" content="width=device-width, initial-scale=1"> 和 @media (min-width: 768px) { 背景颜色：红色； } 在我的 CSS 中。有什么我错过的，因为这不起作用。

【问题讨论】：

标签： html css responsive-design sass

【解决方案1】：

您的媒体查询没问题，但您的背景颜色只是一个 CSS 属性，您必须指定关注哪个元素：

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

【讨论】：

【解决方案2】：

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

首先，@migli 所说的一切都是正确的——你必须确保你的目标是一个特定的 DOM 元素以在你的 CSS 中设置样式。使用 SASS 的主要好处之一是它允许您保持代码 DRY，并且创建断点使编写媒体查询变得超级简单。

为此，请设置一个 @mixin 来确定您的特定断点阈值（例如，这是 Tim Knight 的 easy-to-follow general-purpose example：

@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 文件时，您可以划分代码以保持 DRY。例如，下面的 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;
  }

这是一个小例子，但随着项目规模和范围的扩大，节省击键次数和提高可读性将大大提高您的工作效率（和理智！）。

【讨论】：