css - 如何将这两个较少的@Media 查询与“或”条件结合起来?
问题描述
假设我有一些这样的代码:
@desktop-min-width: 1024px;
@phone-max-width: 768px;
@desktop: ~"only screen and (min-width: @{desktop-min-width})";
@tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width})";
@phone: ~"only screen and (max-width: @{phone-max-width})";
.hola {
@phone {
height: 100vh;
top: 10px;
}
@tablet {
height: 30vh;
top: 30%;
}
@desktop {
height: 30vh;
top: 30%;
}
}
// ...more styles...
我有办法将@tablet 和@desktop 结合起来并减少重复吗?这样的事情是我想象的:
@tablet or @desktop {
height: 30vh;
top: 30%;
}
解决方案
只需使用逗号就可以满足您的要求:
@tablet, @desktop {
...
}
推荐阅读
- python - 循环遍历具有列标题的行
- graphql - GraphQL Dataloader - 带有 load() 函数的全局变量
- tensorflow - 无法在我的 Colab 托管运行时中使用 tensorflow.keras.layers.CuDNNLSTM 或 keras.layers.CuDNNLSTM
- mysql - aws mysql 数据库(Amazon RDS)还是 mongodb?
- ruby-on-rails - 使用管理时添加请求参数时出现不允许的参数错误
- python - 我怎样才能使列表中的每个项目延迟发生?
- python - 如何将字符串添加到文件中的奇数行?
- javascript - 防止内表在嵌套 Html 表中过滤
- python - 集群内的集群是嵌套集群的数据表的多类集群
- java - 由于 android studio 和 adb.exe 的更新,我无法运行我的程序