CSS多设备兼容-媒体查询以及在SCSS中的应用！

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，例如“视口宽于 480 像素”的时候。我们可以利用媒体查询来实现响应式布局，适应各种设备(pc、ipad、phone)视口大小。
媒体查询参考： 媒体查询

媒体查询的类型有一下4种：

类型	说明
all	默认值，所有设备（可省略不写）
print	打印设备(用于打印机和打印预览）
screen	用于电脑屏幕，平板电脑，智能手机等
speech	应用于屏幕阅读器等发声设备

你可以直接在css中实现媒体查询，如下所示：

 /* media-type: 查询类型  media-feature-rule: 查询条件*/
@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

在scss中使用媒体查询：
设置媒体查询的大小变量

/* index.scss
 * 栅格布局 (媒体查询的变量)
 * $ms ≥ 992px    响应式栅格
 * $lg ≥ 1200px   响应式栅格
 * $xl ≥ 1920px   响应式栅格
*/
$ms: 992px;
$lg: 1200px;
$xl: 1920px;

根据屏幕大小走对应的媒体查询，在对应的媒体查询中设置css
媒体查询应该是在页面正常写一套，然后再渐进适配，窗口每小于多少的时候生效一套，例如：本来正常写一套：1920px的代码，然后窗口每小于 1920 适配媒体查询中的一种，窗口每小于 1200 适配媒体查询中的一种，窗口每小于 992 适配媒体查询中的一种，依此类推。

/* media.scss */
@import './index.scss';

// 窗口宽度小于1920px
// 窗口不得大于 $xl 才生效
@media screen and (max-width: $xl) {
   .media_class{
    color: red;
   }
}

// 窗口宽度小于1200px
@media screen and (max-width: $lg) {
    .media_class{
        color: green;
       }
}

// 窗口宽度小于992px;
@media screen and (max-width: $ms) {
    .media_class{
        color: blue;
       }
}

在main文件中引入scss文件

import { createApp } from 'vue';
import App from '/@/App.vue';
// 引入css文件
import '@/theme/media.scss';

const app = createApp(App);
app.mount('#app');

在页面中使用

<template>
  <div>
    <div class="media_class">首页</div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped></style>

大小范围全示例

// 页面宽度 大于 0px 小于 992px;
// 窗口不得大于 $lg 并且不得 小于 $xs 的大小才生效
@media screen and (min-width: $xs) and (max-width: $lg) {
  .sell-histogram {
    width: 100%;
    height: 400px;
    padding-bottom: $padding;
  }
  .monthly-analysis {
    width: 100%;
    height: 400px;
    padding-bottom: $padding;
  }
}

// 页面宽度 大于 992px 小于 1600px;
// 窗口不得大于 $xxl 并且不得 小于 $lg 的大小才生效
@media screen and (min-width: $lg) and (max-width: $xxl) {
  .sell-histogram {
    width: 100%;
    height: 400px;
    padding-bottom: $padding;
  }
  .monthly-analysis {
    width: 100%;
    height: 400px;
    padding-bottom: $padding;
  }
}

// 页面宽度 大于 1600px;
// min-width表示最小为多少，也就是说窗口不得小于 $xxl 的大小
@media screen and (min-width: $xxl) {
  .sell-histogram {
    width: calc(100% - 600px - $padding);
    height: 400px;
    padding-bottom: $padding;
  }
  .monthly-analysis {
    margin-left: $padding;
    width: 600px;
    height: 400px;
    padding-bottom: $padding;
  }
}