- 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;
}
但是这样行不通,不知道是否有其他方案
- 共 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-color和calculate-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 的设备上应用的样式。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

