使用 css3 的响应式设计

Posted 2023-03-06

【中文标题】使用 css3 的响应式设计

【英文标题】：responsive design using css3

【发布时间】：2017-12-05 01:21:58

【问题描述】：

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

【参考方案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;
    

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