你們對于vw一無所知

zhonghanwen 發(fā)布于2019-08-30 12:53 / 1674人閱讀

摘要：可以使用在低端手機瀏覽器上嗎貌似不行但是你們一直誤解了一個問題加上基本上絕大多數(shù)手機寬度都變成所以廢話不多說上代碼全局變量返回對值得兼容處理通過一個和其值生成一個兼容的通過一個生成一個兼容的

vw可以使用在低端手機瀏覽器上嗎

貌似不行但是你們一直誤解了一個問題

加上

基本上android絕大多數(shù)手機寬度都變成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);
    }
}