移动端自适应布局解决方案(基于vw布局)

本文参考自张鑫旭大神的文章:http://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/

在移动端进行布局时,为了兼容不同的设备屏幕,往往是使用媒体查询,设置几个断点,让其在不同的屏幕大小时展示不同效果,但是这样做的效果并不好,也不能很好的达到不同屏幕完美适应的问题。

下面的这个解决方案是基于张鑫旭博客给出的布局方案,使用vw视口宽度来兼容不同的设备。

$browser-default-font-size: 16px !default;

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

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

  @for $i from 1 through $max {
    $value: strip-units(nth($values, $i));
    $browser-default-font-size: strip-units($browser-default-font-size);
    $pxValues: #{$pxValues + $value}px;

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

    @for $i from 1 through $max {
      $value: strip-units(nth($values, $i));
      $remValues: #{$remValues + $value / strip-units($browser-default-font-size)}rem;

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

  #{$property}: $pxValues;
  #{$property}: $remValues;
}

html {
  font-size: $browser-default-font-size;
}

@media screen and (min-width: 375px) {
  html {
    font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
    font-size: calc(18px + 4 * (100vw - 414px) / 586);
  }
}

@media screen and (min-width: 600px) {
  html {
    font-size: calc(125% + 4 * (100vw - 600px) / 400);
    font-size: calc(20px + 4 * (100vw - 600px) / 400);
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size: calc(137.5% + 5 * (100vw - 1000px) / 1000);
    font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
  }
}

为了方便计算,使用sass来实现效果。

比如如下的样式

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  padding: 15px;
}

可以修改为

.box {
  @include pxCalc(width, 200px);
  @include pxCalc(height, 200px);
  border: 1px solid #000;
  @include pxCalc(padding, 15px);
}

编译之后的结果如下:

.box {
    width: 200px;
    width: 12.5rem;
    height: 200px;
    height: 12.5rem;
    border: 1px solid #000;
    padding: 15px;
    padding: 0.9375rem;
}

这样就能实现了缩放网页时,达到有点类似于缩放图片的效果,布局不会出现错乱,完美兼容各种屏幕。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注