@charset "utf-8";



@function mfe-px2rem($px) {
    @return $px/16 + rem;
}

/*flexbox */
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
 // float:left; /*QQ*/
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}

/*
    px to rem
    @include rem-fallback(height,100);
    @include rem-fallback(margin,10,20);
    @include rem-fallback(padding,1,2,3,4);
    @include rem-fallback(width,20)
 */
$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义

@function pxTorem($px){//$px为需要转换的字号
    @return $px / $browser-default-font-size * 1rem;
}
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem-fallback($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value*16}px;

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  }

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }

  #{$property}: $pxValues;
  #{$property}: $remValues;
}
/*图片比例缩放*/
/*http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios*/
/* Calculate fluid ratio based on two dimensions (width/height) */
@mixin fluid-ratio($large-size, $small-size) {
  $width-large: nth($large-size, 1);
  $width-small: nth($small-size, 1);
  $height-large: nth($large-size, 2);
  $height-small: nth($small-size, 2);
  $slope: ($height-large - $height-small) / ($width-large - $width-small);
  $height: $height-small - $width-small * $slope;
  padding-top: $slope * 100%;
  height: $height;

  background-size: cover;
  -moz-background-size: cover;  /* Firefox 3.6 */
  background-position: center;  /* Internet Explorer 7/8 */
}

figure.fluidratio {
  /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */
  @include fluid-ratio(800px 200px, 300px 150px);

  background-image: url(http://voormedia.com/examples/amsterdam.jpg);
}
