使用css3的响应式设计

Question

我正在尝试使用媒体查询。我在头脑中添加了meta name =“viewport”content =“width = device-width，initial-scale = 1”>和@media（min-width：768px）{background-color：red; } 在我的CSS。有什么我失踪，因为这不起作用。

Answer 1

你的媒体查询是好的，但你的背景颜色只是一个CSS属性，你必须指定哪些因素有关：

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

Answer 2

您标记这是利用上海社会科学院以及响应式设计，所以如果其他人将来有相关的问题，我认为提供更详细的，以SASS为导向的答案是适当的。

首先，@ migli说的一切都是真实的 - 你必须确保你的目标是一个特定的DOM元素，以在你的CSS中进行样式化。使用SASS的一个主要好处是它可以让你的代码保持干爽，并且创建断点使得编写媒体查询变得非常简单。

要做到这一点，建立一个@mixin它建立您的具体断点阈值（例如这里是一个easy-to-follow general-purpose example由Tim骑士：

@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; 
    } 

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