我正在尝试使用媒体查询。我在我的头中包含了meta name=“viewport”content=“width=device-width,initial-scale=1”>并且在我的CSS中包含了@media(min-width:768px){background-color:red;}。是不是因为这不起作用而让我错过了什么。
您的媒体查询是可以的,但是您的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;
}
这是一个小例子,但随着项目的规模和范围的增长,节省击键和提高可读性将大大提高您的生产力(和理智!)。