大家对于vw一无所知

vw可使用在低端手机浏览器上吗

貌似不行 可是大家一直误解了一个问题

加上

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

基本上android绝大多数手机 宽度都变成360

因此废话很少说 上sass代码

////
/// This is a poster comment.
/// It will apply annotations to all items from file.
/// @group com.zhilizhiliui.framework.sass.common
/// @author andypinet
////

/// 全局变量
$com-zhilizhiliui-framework-sass-common-vw: (
    'base': 360
) !global;

/// @access public
/// @example scss - com-zhilizhiliui-framework-sass-common-vw-by-value function
///   com-zhilizhiliui-framework-sass-common-vw-by-value(100)
///   // (360px, 100vw)
/// 返回对值得兼容处理
@function com-zhilizhiliui-framework-sass-common-vw-by-value($value) {
    $base: map-deep-get($com-zhilizhiliui-framework-sass-common-vw, "base");
    @return ($value * $base / 100 + 0px, $value + 0vw);
}

/// @access public
/// @example scss - com-zhilizhiliui-framework-sass-common-vw-by-value function
///   com-zhilizhiliui-framework-sass-common-vw-by-value(width, 100)
///   // width: 360px,
///   // width: 100vw
/// 经过一个css prop和其值 生成一个兼容vw的css
@mixin com-zhilizhiliui-framework-sass-common-vw-by-value($prop, $value) {
    $base: map-deep-get($com-zhilizhiliui-framework-sass-common-vw, "base");
    $result: com-zhilizhiliui-framework-sass-common-vw-by-value($value);
    #{$prop}: nth($result, 1);
    #{$prop}: nth($result, 2);
}

/// @access public
/// @example scss - com-zhilizhiliui-framework-sass-common-vw-by-value function
///   com-zhilizhiliui-framework-sass-common-vw-by-value((width: 100, height: 100))
///   // width: 360px,
///   // width: 100vw,
///   // height: 360px,
///   // height: 100vw,
/// 经过一个css map 生成一个兼容vw的css
@mixin com-zhilizhiliui-framework-sass-common-vw-by-map($map) {
    @each $prop, $value in $map {
        @include com-zhilizhiliui-framework-sass-common-vw-by-value($prop, $value);
    }
}