最小的 SCSS 媒体查询不适用

Question

所以我只是在我的 webpack 项目中测试了一些针对 scss 的媒体查询。 我刚刚在正文中有一个简单的 div，并且希望背景根据屏幕的宽度而变化。

我的两个最小的媒体查询，small 和 xsmall，只是不适用，我不知道为什么。

不管我把屏幕做多窄，900px以下的背景都是绿色的

$xsmall: 300px;
$small: 600px;
$medium: 900px;
$large: 1200px;
$xlarge: 1500px;
$xxlarge: 2000px;

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  .test-class {
    width: 100%;
    height: 100%;
    @media (min-width: $xsmall) {    <--- Doesn't Apply
      background-color: purple;   
    }
    @media (min-width: $small) {     <--- Doesn't Apply
      background-color: pink;
    }
    @media (min-width: $medium) {
      background-color: green;
    }
    @media (min-width: $large) {
      background-color: yellow;
    }
    @media (min-width: $xlarge) {
      background-color: blue;
    }
    @media (min-width: $xxlarge) {
      background-color: orange;
    }
  }
}

Answer 1

对其进行排序。

使用的是通用 HTML 样板，而不是 VSCode 提供的完整样板。

添加：

<meta name="viewport" content="width=device-width, initial-scale=1">

到标题并解决了它。