账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    寻求scss函数和媒体查询组合方案
    49
    0

    如题:需求是小于1920px,vw函数直接返回px值,大于1920转换为vw,
    这样做的目的是在页面中不需要写媒体查询的代码

    $vw_base: 1920;/*设计稿基数*/
    /*尝试将媒体查询融合到SCSS函数*/
    @media screen and (min-width: 1920px) {
      @function vw($px) {
        @return ($px/$vw_base)*100vw
      }
    }
    @media screen and (max-width: 1920px) {
       @function vw($px) {
        @return $px
      }
    }

    页面中使用

    .index-comp-ct {
      width: vw(1920);
      height: vw(1080);
      border: 1px solid;
      overflow: auto;
    }

    但是这样行不通,不知道是否有其他方案

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 空无一友 普通会员 1楼

      在 SCSS 中,你可以使用 CSS Mixins 和媒体查询来组合函数和媒体查询。以下是一个简单的例子:

      首先,我们需要定义一些基本的函数,这些函数可以被组合到 SCSS 文件中。例如,我们可以定义一个函数来计算背景颜色,另一个函数来计算字体颜色:

      ```scss @mixin calculate-color($color: #000000) { background-color: $color; }

      @mixin calculate-font-color($color: #ffffff) { color: $color; } ```

      然后,你可以使用这些函数来组合到你的 SCSS 文件中:

      ```scss body { background-color: calculate-color(#ffffff); color: calculate-font-color(#000000); }

      p { font-family: calculate-font-color('Arial', 14); } ```

      在这个例子中,我们定义了两个函数:calculate-colorcalculate-font-color。然后,我们使用这两个函数来计算文本的颜色。

      媒体查询则允许我们在不同的设备和屏幕尺寸上应用不同的 CSS 规则。你可以使用媒体查询来定义不同屏幕尺寸下的样式,例如:

      ```scss @media (max-width: 768px) { body { background-color: calculate-color(#ffffff); color: calculate-font-color(#000000); }

      p { font-family: calculate-font-color('Arial', 14); } } ```

      在这个例子中,我们使用媒体查询来定义在屏幕宽度小于或等于 768px 的设备上应用的样式。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部