媒体查询+scss 响应式开发

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

```bash $color:#3497ee; @mixin opacity($value) {     opacity: $value;     filter: alpha(opacity=$value*100); }   @mixin transition($obj, $time) {     -webkit-transition: $obj $time;     -moz-transition: $obj $time;     -ms-transition: $obj $time;     transition: $obj $time; }   @mixin transform($value) {     -webkit-transform: $value;     -moz-transform: $value;     -ms-transform: $value;     transform: $value; }   //$attr 属性  $val 值  $steps 每次减少的值 @mixin space($attr,$val,$steps:2) {     #{$attr}:$val;   @media only screen and (max-width: 1200px) {     #{$attr}:$val - $steps;   }   @media only screen and (max-width: 992px) {     #{$attr}:$val - $steps*2;   }   @media only screen and (max-width: 768px) {     #{$attr}:$val - $steps*3;   }   @media only screen and (max-width: 520px) {     #{$attr}:$val - $steps*4;   }   @media only screen and (max-width: 420px) {     #{$attr}:$val - $steps*5;   } } //例子 .box{     background-color:red;     @include space(padding-top,24px);     @include space(font-size,24px) }