大家對於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);
    }
}