参考postcss-px-to-viewport,不使用postcss-px-to-viewport, 直接使用nuxt scss的@mixin来px转换viewport

在Nuxt.js项目中，如果你不想使用`postcss-px-to-viewport`这样的插件来处理响应式设计中的像素到视口单位的转换，你可以自定义一个SCSS Mixin（混合器）来实现这个功能。这里是一个简单的示例，说明如何在Nuxt的SCSS中创建一个名为`px-to-vw`的Mixin来实现像素到视口宽度单位（vw, viewport width）的转换：

// 在你的Nuxt项目的/scss/mixins.scss文件中

@mixin px-to-vw($px, $breakpoints: (xs: 375px, sm: 768px, md: 1024px, lg: 1280px, xl: 1920px)) {
  @each $viewport-name, $viewport-width in $breakpoints {
    @media (max-width: $viewport-width) {
      @content;
    }
  }

  // 如果你想要一个通用的计算方法，可以这样写
  & {
    font-size: $px / ($viewport-width / 100)vw;
    width: $px / ($viewport-width / 100)vw;
    height: $px / ($viewport-width / 100)vw; // 或者你需要转换的其他尺寸
  }
}

// 使用这个Mixin
.button {
  @include px-to-vw(16px); // 这里的16px会根据屏幕大小动态调整为vw
}

在这个例子中，`px-to-vw` Mixin接受一个像素值和可选的断点数组作为参数。当媒体查询检测到屏幕宽度小于或等于指定的断点时，`@content`处的内容会被应用，这样你可以在调用这个Mixin的地方提供具体的样式。

相关问题：
1. 在Nuxt的SCSS中，如何使用Media Queries?
2. 如何在CSS中定义媒体查询响应式样式？
3. 如何在Mixin中传递变量并根据条件应用样式？