原生css媒体查询

// 手机
@media (min-width: 320px) and (max-width: 480px) {
  .header {
    height: 50px;
    ...
  }
}
// 平板
@media (min-width: 481px) and (max-width: 768px) {
  .header {
    height: 70px;
    ...
  }
}
// PC
@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    height: 120px;
    ...
  }
}
// 桌面应用
@media (min-width: 1025px) and (max-width: 1200px) {
  .header {
    height: 150px;
    ...
  }
}
// 电视
@media (min-width: 1201px) {
  .header {
    height: 200px;
    ...
  }
}

基于原生css的写法对数据抽离

1. 将每个端的设备参数抽离为一个键值对 如'phone':['320px','480px']
2. 将所有键值对正和到一个对象中

         {
            'phone':['320px','480px'],
            'pad':['481px','768px'],
            'pc':['769px','1024px'],
            'desktop':['1025px','1200px'],
            'tv':'1201px'
         }

3. 接下来就是取值和赋值的过程

JS实现

      const data = {
        phone: ["320px", "480px"],
        pad: ["481px", "768px"],
        pc: ["769px", "1024px"],
        desktop: ["1025px", "1200px"],
        tv: "1201px",
      }
      function getMedia(name, customStyle) {
        const value = data[name]
        if (typeof value === "string") {
          return `@media (min-width: ${value}) {
                           ${customStyle}
                     }`
        }
        const minWidth = value[0]
        const maxWidth = value[1]
        const result = `@media (min-width: ${minWidth}) and (max-width: ${maxWidth}) {
                           ${customStyle}
                        }`
        return result
      }
      console.log(getMedia("phone", `.header {height: 50px;}`))
      console.log(getMedia("pad", `.header {height: 50px;}`))
      console.log(getMedia("pc", `.header {height: 50px;}`))
      console.log(getMedia("desktop", `.header {height: 50px;}`))
      console.log(getMedia("tv", `.header {height: 50px;}`))

打印结果

SASS实现

// 创建数据集
$arr: (
  "phone": (
    320px,
    480px,
  ),
  "pad": (
    481px,
    768px,
  ),
  "pc": (
    769px,
    1024px,
  ),
  "desktop": (
    1025px,
    1200px,
  ),
  "tv": 1201px,
);
// 定义一个混入方法@mini setMedia(){}
@mixin setMedia($key) {
  // 根据key来获取数组项
  $bp: map-get($arr, $key);  // map-get 方法 返回 key的索引值
  @if type-of($bp) == "list" {   // type-of 类型判断(x,y)结构返回 list
    $min: nth($bp, 1);  // nth(数组,索引) 下标从1开始 返回索引的值
    $max: nth($bp, 2);
    @media (min-width: $min) and (max-width: $max) {
      @content;  // @content 可以当做一个插槽
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}

使用

@import './mixin.scss';

.header{
   width: 100%;
   @include setMedia('phone'){
      height: 50px;
   }
   @include setMedia('pad'){
      height: 70px;
   }
   @include setMedia('pc'){
      height: 120px;
   }
   @include setMedia('desktop'){
      height: 150px;
   }
   @include setMedia('tv'){
      height: 200px;
   }
}

编译结果

.header {
  width: 100%;
}
@media (min-width: 320px) and (max-width: 480px) {
  .header {
    height: 50px;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .header {
    height: 70px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    height: 120px;
  }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .header {
    height: 150px;
  }
}
@media (min-width: 1201px) {
  .header {
    height: 200px;
  }
}