提问者:小点点

使用css3的响应式设计


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


共2个答案

匿名用户

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

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

匿名用户

您将此标记为使用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;
  }  

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