你们对于vw一无所知

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

你们对于vw一无所知_第1张图片

貌似不行 但是你们一直误解了一个问题

加上

基本上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);
    }
}

你可能感兴趣的:(css)