通过Sass 3 编写媒体查询代码

如果对Sass不熟悉的话，可以先点击下面这篇文章链接学习Sass 3环境搭建及开发。

《Sass 3 的环境搭建及开发》

Sass媒体查询

示例代码

编译前

$phone_max_size:769px;  //手机
$flat_max_size:993px;   //平板
$medium_max_size:1201px;//中等屏幕

$small_font_size:12px;
$medium_font_size:14px;
$big_font_fize:16px;

$small_line_height:14px;
$medium_line_height:18px;
$big_line_height:22px;

@mixin phone{
  @media (max-width:#{$phone_max_size}){
    @content
  }
}

@mixin flat{
  @media screen and (min-width: #{$phone_max_size}) and (max-width: #{$flat_max_size}) {
    @content
  }
}

@mixin medium_scrren{
  @media screen and (min-width: #{$flat_max_size}) and (max-width: #{$medium_max_size}){
    @content
  }
}

@mixin big_screen{
  @media screen and (min-width: #{$medium_max_size}){
    @content
  }
}

@mixin base_set($font-size:$small_font_size,$line-height:$small_line_height){
  font-size:$font-size;
  line-height: $line-height;
}

html{
  /* 手机屏幕<=768px; */
  /* 768px<=平板屏幕<=991px; */
  /* 992px<=中等屏幕<=1200px; */
  /* 大屏幕>=1200px; */
  overflow: hidden;
}

.cont{
  position: relative;
  // 手机屏幕
  @include phone{
    @include base_set;
  }
  // 平板屏幕 
  @include flat{
    @include base_set($line-height:$medium_line_height);
  }
  // 中等屏幕 
  @include medium_scrren{
    @include base_set($font-size:$medium_font_size,$line-height:$medium_line_height);
  }
  // 大屏幕 
  @include big_screen{
    @include base_set($font-size:$big_font_fize,$line-height:$big_line_height);
  }
}

编译后

@charset "UTF-8";
html {
  /* 手机屏幕<=768px; */
  /* 768px<=平板屏幕<=991px; */
  /* 992px<=中等屏幕<=1200px; */
  /* 大屏幕>=1200px; */
  overflow: hidden;
}

.cont {
  position: relative;
}

@media (max-width: 769px) {
  .cont {
    font-size: 12px;
    line-height: 14px;
  }
}

@media screen and (min-width: 769px) and (max-width: 993px) {
  .cont {
    font-size: 12px;
    line-height: 18px;
  }
}

@media screen and (min-width: 993px) and (max-width: 1201px) {
  .cont {
    font-size: 14px;
    line-height: 18px;
  }
}

@media screen and (min-width: 1201px) {
  .cont {
    font-size: 16px;
    line-height: 22px;
  }
}

注意：

        上面的媒体查询有个细节之处非常巧妙，体现在mixin里设置的临界值。有的比较通用的前端框架里舍弃了近1px的空白范围，例如手机屏幕范围取值是小于或等于767px，平板屏幕取值范围是768px至991px，...，这样的话当输出设备中的页面可见区域宽度是在767px至768px之间的话，那么样式会用不上。

        如果将手机屏幕范围取值设置为小于或等于768px，平板屏幕取值范围是768px至992px【含边界值】的话，那么当输出设备中的页面可见区域宽度正好是768px的话，那么媒体查询里手机屏幕范围的样式会渲染一次页面，而媒体查询里平板屏幕范围内的样式会再渲染一次页面【非必要的性能额外开销】。

        如果将手机屏幕范围取值设置为小于或等于768px，平板屏幕取值范围设置为768.0001px至992px【含边界值】的话，那么当输出设备中的页面可见区域宽度正好在768px至768.0001px之间的话，那么在媒体查询大括号里设置的样式仍然会失效，而且浮点数数字的计算应该比整数型数字的计算更耗费性能，尤其是sass代码里用mixin的方式导入媒体查询，导致编译后的css文件里有很多媒体查询语句时。

        虽然输出设备中的页面可见区域宽度值为浮点数值的可能性很低，但是可能性大于0跟等于0是两个完全不同的领域。那么如何做到不放过任何一个再微小不过的可能值，又保障尽可能好的计算性能呢？一个可行方案就是各个临界点以一种统一的方式错开临界点一个最小整数单位【+1px或-1px】，然后通过新的临界判断点重叠的方式保障整套媒体查询的适应值范围覆盖所有的可能性，如果有输出设备中的页面可见区域宽度正好是新的“临界判断点”，可以说这种情况发生的可能性比不调整临界点时发生这种情况的可能性降低了多个数量级，而且就算发生了，那么当时使用该设备访问页面的人所承受的损失仅仅只是媒体查询里的代码多渲染了页面 一个或者一组代码块，而不至于说看到的页面样式混乱，不能实现正常操作功能。

        有个词语叫“滴水不漏”，有个词语叫“见缝插针”，有句话叫“可能性几乎等于0”，有句话叫“在设定精确度的情况下，0跟无数足够接近于0的数字都是等同的”。但是可以说前面的媒体查询实现方案体现出来的则是真正意义上的“0和1”，而不是“0至1”。