你们对于vw一无所知

zhonghanwen 发布于2019-08-30 12:53 / 1665人阅读

摘要：可以使用在低端手机浏览器上吗貌似不行但是你们一直误解了一个问题加上基本上绝大多数手机宽度都变成所以废话不多说上代码全局变量返回对值得兼容处理通过一个和其值生成一个兼容的通过一个生成一个兼容的

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

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

加上

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

云服务器 GPU云服务器你们 vw vw在html html 单位vw

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115145.html

rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

wangbinke 2019-08-29 16:56 评论0 收藏0
rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

tianren124 2019-08-23 12:21 评论0 收藏0
纯CSS + 媒体查询实现网页导航特效

摘要：纯媒体查询实现网页导航特效附上效果图代码如下，复制即可使用我在这谁敢动我。纯css+媒体查询实现网页导航特效附上效果图：代码如下，复制即可使用： DOCTYPE html> Document body { background: #801638; } body, ...

番茄西红柿 2019-04-23 13:46 评论0 收藏0
干货--手把手撸vue移动UI框架：滑动轮播

摘要：其次父组件中负责通用的功能，以及轮播的整体架构，其结构如下。下面的是一种移动端的适配方案。接下来实现函数运用动画切换到指定下标的子项到此为止，咱们就已经完成了一个初步的滑动切换轮播图的功能了。前言昨天写了一篇侧边菜单组件的文章，阅读人数挺多的，内心很欣喜（偷着乐，第一篇文章有这么多人看）！乘着这股劲，今天在继续写一篇我们平时工作中更常用的滑动轮播组件的文章。效果展示老规矩，咱们...

MSchumi 2019-08-22 15:12 评论0 收藏0